axios封装取消重复请求
时间: 2023-08-31 14:11:01 浏览: 135
在使用axios进行请求时,可以通过封装来实现取消重复请求的功能。以下是一个简单的封装示例:
```javascript
import axios from 'axios';
// 创建一个取消请求的CancelToken实例
const cancelToken = axios.CancelToken;
const source = cancelToken.source();
// 定义一个变量用于存储重复请求的标识
let pendingRequest = null;
// 创建一个axios实例
const instance = axios.create({
baseURL: 'http://api.example.com',
timeout: 5000,
});
// 请求拦截器
instance.interceptors.request.use(config => {
// 如果存在重复请求,则取消之前的请求
if (pendingRequest) {
pendingRequest.cancel('canceled due to duplicate request');
}
// 存储当前请求
pendingRequest = source;
// 将取消标识添加到请求配置中
config.cancelToken = source.token;
return config;
}, error => {
return Promise.reject(error);
});
// 响应拦截器
instance.interceptors.response.use(response => {
// 请求完成后,将标识置为null
pendingRequest = null;
return response.data;
}, error => {
// 请求出错后,将标识置为null
pendingRequest = null;
return Promise.reject(error);
});
export default instance;
```
在上述示例中,我们通过创建一个取消请求的CancelToken实例和一个变量pendingRequest来管理重复请求。在请求拦截器中,如果存在重复请求,就取消之前的请求并将当前请求存储到pendingRequest变量中。在响应拦截器中,无论请求成功还是失败,都将pendingRequest标识重置为null。
这样,当多次快速发起相同的请求时,只会保留最后一次的请求,之前的请求都会被取消。这样就实现了取消重复请求的功能。
请注意,这只是一个简单的示例,实际应用中可能需要根据具体场景进行适当的修改和扩展。
阅读全文