vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
时间: 2024-10-15 22:10:56 浏览: 34
Vue-axios是一个用于Vue.js应用的基于axios的封装库,它可以帮助你在Vue组件中更方便地使用axios发起HTTP请求。如果你需要同时发送多个接口请求,并希望在所有请求完成后才进行某个操作,可以使用Promise.all()函数结合axios的并发特性来实现。
首先,在你需要等待所有请求的地方,创建一个数组存储每个axios实例:
```javascript
const promises = [
axios.get('api1'),
axios.get('api2'),
axios.get('api3')
];
```
然后使用`Promise.all()`来等待所有请求完成:
```javascript
Promise.all(promises)
.then(results => {
// 当所有请求都成功返回时,results数组将包含每个接口响应的结果
const [res1, res2, res3] = results;
// 这里你可以对结果进行操作,比如合并数据、更新状态等
handleData(res1.data, res2.data, res3.data);
})
.catch(error => {
// 如果有任一请求出错,这个错误会被catch块捕获
console.error('An error occurred:', error);
});
```
在这个例子中,`handleData`是你自定义的一个函数,用来处理所有接口返回的数据。当所有请求都完成后,会执行`handleData`函数。
阅读全文