axios取消重复请求
时间: 2023-07-04 19:05:36 浏览: 54
在使用axios发送请求时,我们可以使用axios的CancelToken来取消重复请求。
首先,我们需要创建一个axios实例,然后在拦截器中检查是否有相同的请求正在进行中,如果有,则取消重复请求。
以下是一个示例代码:
```javascript
import axios from 'axios';
const instance = axios.create({
baseURL: 'https://example.com/api',
});
let pending = []; // 存储所有正在进行的请求
const cancelToken = axios.CancelToken;
const removePending = (config) => {
for (let i = 0; i < pending.length; i++) {
if (pending[i].url === config.url + '&' + config.method) {
// 取消重复请求
pending[i].cancel();
pending.splice(i, 1);
}
}
};
instance.interceptors.request.use(
(config) => {
removePending(config);
config.cancelToken = new cancelToken((c) => {
pending.push({ url: config.url + '&' + config.method, cancel: c });
});
return config;
},
(error) => {
return Promise.reject(error);
}
);
instance.interceptors.response.use(
(response) => {
removePending(response.config);
return response;
},
(error) => {
return Promise.reject(error);
}
);
export default instance;
```
在上面的代码中,我们创建了一个名为“pending”的数组来存储所有正在进行的请求。在请求拦截器中,我们使用axios的CancelToken来创建一个取消令牌,并将其添加到请求配置中。同时,我们还将请求的URL和HTTP方法作为键值对存储在“pending”数组中,以便我们可以在拦截器中检查是否存在相同的请求正在进行中。如果有相同的请求正在进行中,则取消新请求。在响应拦截器中,我们从“pending”数组中删除已完成的请求。
这样,我们就可以避免发送重复请求了。