vue如何在完成一个axios请求后再执行下一个anxios
时间: 2023-05-13 14:04:59 浏览: 60
请求?
您可以使用axios的拦截器来实现这个功能。在每个axios请求之前,您可以添加一个拦截器来检查前一个请求是否已经完成。如果前一个请求已经完成,您可以继续执行下一个请求。以下是一个示例代码:
```
// 创建一个axios实例
const axiosInstance = axios.create({
baseURL: 'https://api.example.com',
});
// 定义一个变量来保存前一个请求的Promise对象
let previousRequest = null;
// 添加一个请求拦截器
axiosInstance.interceptors.request.use(
(config) => {
// 如果前一个请求已经完成,继续执行当前请求
if (!previousRequest) {
return config;
}
// 如果前一个请求还没有完成,取消当前请求
const cancelToken = new axios.CancelToken((cancel) => {
cancel('Previous request is not completed');
});
return {
...config,
cancelToken,
};
},
(error) => {
return Promise.reject(error);
}
);
// 添加一个响应拦截器
axiosInstance.interceptors.response.use(
(response) => {
// 保存当前请求的Promise对象
previousRequest = Promise.resolve(response);
return response;
},
(error) => {
// 保存当前请求的Promise对象
previousRequest = Promise.reject(error);
return Promise.reject(error);
}
);
// 发送第一个请求
axiosInstance.get('/api/first').then(() => {
// 发送第二个请求
axiosInstance.get('/api/second');
});
```