axios取消接口请求

其中一个应用场景：比如说我们项目中的分页请求，如果点的快的话，一次点十几下，那么我们就会向后端发送十几个请求，这个时候，我们可以把之前还在请求的接口取消掉，只请求最后一页的数据,以免之前的数据覆盖最后请求的数据，我是在拦截器里面直接加的

let axiosList = [];
let cancelToken = axios.CancelToken;
let removePending = (config) => {
axiosList.forEach((val,index)=>{
if(val.url == config.url){
axiosList[index].f();
axiosList.splice(index, 1);
}
})
}

axios.interceptors.request.use(
config => {
if (config.url === '/' || config.url == 'http://xxxx/xxxxxx/info' ||
config.url == "http://xxxxxxx/xxxxxx/") { //不需要添加token的接口
} else {
if (store.token) {
config.headers.Authorization = store.token;
}
}
//不需要取消请求的接口
let url = ['xxxxx', 'xxxxx', 'xxxxx']
if (!url.includes(config.url)) {
removePending(config);
config.cancelToken = new cancelToken((c) => {
// 这里是axios标识
pending.push({
url: config.url
f: c
});
});
}
return config;
},
error => {
return Promise.reject(error);
});

axios.interceptors.response.use(
res => {
removePending(res.config);
if (res.data.code == 1006 || res.data.code == 1005) {
sessionStorage.clear();
router.replace({
path: '/'
});
} else {
return res;
}
},
error => {
if (error.response) {
switch (error.response.status) {
// case 500:
// sessionStorage.clear();router.replace({path:'/'});break;
}
}
return Promise.reject(error)
}
);

有什么写的不对的地方欢迎批评指正
参考自：https://www.jianshu.com/p/22b49e6ad819