vue项目按钮点击导出两个文件，有时只导出一个？
本文分析了在Vue项目中，点击按钮导出两个文件时，有时只导出一个文件的问题。该问题可能源于接口调用方式、浏览器兼容性以及资源释放等方面。
问题场景：开发者希望通过一个按钮点击事件，调用两个接口获取数据，并分别导出两个文件。然而，实际情况是导出结果不稳定，有时成功导出两个文件，有时只导出一个。代码中尝试了顺序调用和Promise.all并发调用两种方式。
排查方向：
-
验证代码执行情况: 使用浏览器开发者工具（例如Chrome DevTools）调试代码，确认两个接口请求是否都成功发送并返回了预期的数据。接口请求失败或返回错误数据是导致只导出一个文件的主要原因。
立即学习“前端免费学习笔记（深入）”；
Vuex参考手册 中文CHM版下载Vuex是一个专门为Vue.js应用设计的状态管理模型 + 库。它为应用内的所有组件提供集中式存储服务，其中的规则确保状态只能按预期方式变更。它可以与 Vue 官方开发工具扩展(devtools extension) 集成，提供高级特征，比如 零配置时空旅行般（基于时间轴）调试，以及状态快照 导出/导入。本文给大家带来Vuex参考手册，需要的朋友们可以过来看看！
-
标签及target="_blank": 如果使用标签进行文件下载，添加target="_blank"属性，让下载链接在新标签页打开。这有助于避免浏览器或网络环境下可能出现的下载冲突或阻塞。 -
createObjectURL和revokeObjectURL: 如果使用了createObjectURL创建文件URL，务必在使用完毕后调用revokeObjectURL释放资源。未释放资源可能导致浏览器资源竞争，影响文件导出。 确保每个createObjectURL都有对应的revokeObjectURL调用，避免资源泄漏。
通过仔细检查以上三点，开发者可以有效定位并解决导致文件导出不稳定的根本原因，从而实现稳定可靠的双文件导出功能。 建议检查网络请求的日志，查看接口返回的状态码和数据，以进一步确认问题所在。
