vue axios路由跳转取消所有请求 和 防止重复请求

直接上干货

在发送第二次请求的时候如果第一次请求还未返回，则取消第一次请求，以保证后发送的请求返回的数据不会被先发送的请求覆盖。

或者是跳转路由的时候取消还未返回的请求

第一步： axios 怎么取消：

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
cancelToken: new CancelToken(function executor(c) {
// An executor function receives a cancel function as a parameter
cancel = c;
})
});第二步： 这是取消一个axios 如果是多个呢？那么我们就需要有个地方给存下来

vuex
state: {
// axios取消请求
axiosPromiseCancel: [],
}
第三步： axios 拦截器axios.js

import store from './store';
const CancelToken = axios.CancelToken;let cancel;

// 防止重复请求
let removePending = (config) => {
for (let k in store.state['axiosPromiseCancel']) {
if (store.state['axiosPromiseCancel'][k].u === config.url + '&' + config.method) { //当前请求在数组中存在时执行函数体
store.state['axiosPromiseCancel'][k].f(); //执行取消操作
store.state['axiosPromiseCancel'].splice(k, 1); //把这条记录从数组中移除
}
}
};

axios.interceptors.request.use(config=>{
// 这个是 取消重点

removePending(config);
config.cancelToken = new CancelToken((cancel) => {
store.state['axiosPromiseCancel'].push({ u: config.url + '&' + config.method, f: cancel });
});

return config;
});
axios.interceptors.response.use(res=>{

removePending(res.config);

// do something...
},error=>{
if (axios.isCancel(error)) {
// 为了终结promise链 就是实际请求 不会走到.catch(rej=>{});这样就不会触发错误提示之类了。
return new Promise(() => {});
}else{
return Promise.reject(error)
}});

第四步： 就是在router 里做取消动作了 router.js

import store from './store';
router.beforeEach((to, from, next) => {

if(store.state['axiosPromiseCancel'].length > 0) {
store.state['axiosPromiseCancel'].forEach(e => {
e && e.f()
});
}
store.state['axiosPromiseCancel'] = [];

})