Vue.js中如何同时调用两个接口并导出两个文件？

在Vue.js中，你可以使用axios或其他HTTP库来同时调用两个接口，并使用Promise.all来确保两个请求都完成后再进行后续操作。然后，你可以使用FileSaver.js或其他文件下载库来导出这两个文件。

以下是一个示例代码，展示如何同时调用两个接口并导出两个文件：

1. 首先，确保你已经安装了axios和file-saver库：

npm install axios file-saver

2. 在Vue组件中编写代码：

<template>
  <div>
    <button @click="fetchAndExportFiles">导出文件</button>
  </div>
</template>

<script>
import axios from 'axios';
import { saveAs } from 'file-saver';

export default {
  methods: {
    async fetchAndExportFiles() {
      try {
        // 同时调用两个接口
        const [response1, response2] = await Promise.all([
          axios.get('https://api.example.com/endpoint1', { responseType: 'blob' }),
          axios.get('https://api.example.com/endpoint2', { responseType: 'blob' })
        ]);

        // 获取文件数据
        const file1 = new Blob([response1.data], { type: response1.headers['content-type'] });
        const file2 = new Blob([response2.data], { type: response2.headers['content-type'] });

        // 导出文件
        saveAs(file1, 'file1.pdf'); // 假设第一个文件是PDF
        saveAs(file2, 'file2.csv'); // 假设第二个文件是CSV

        console.log('文件导出成功');
      } catch (error) {
        console.error('文件导出失败:', error);
      }
    }
  }
};
</script>

代码说明：

1. Promise.all: 用于同时发起两个请求，并等待它们都完成。Promise.all返回一个数组，数组中的每个元素对应一个请求的响应。

2. responseType: 'blob': 在axios请求中设置responseType为blob，以便正确处理二进制文件（如PDF、CSV等）。

3. Blob: 用于创建一个包含文件数据的Blob对象。

4. saveAs: 使用file-saver库的saveAs方法将Blob对象保存为文件。

注意事项：

• 确保接口返回的文件类型与Blob对象的type属性匹配，以便浏览器正确识别文件类型。
• 如果接口返回的是JSON或其他非文件数据，你需要根据实际情况处理数据并生成文件。

通过这种方式，你可以在Vue.js中同时调用两个接口并导出两个文件。