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;

axios.interceptors.request.use(config=>{
  // 这个是 取消重点
  config.cancelToken = new CancelToken((cancel) => {

    store.state[‘axiosPromiseCancel‘].push(cancel);

  });
  return config;
});
axios.interceptors.response.use(res=>{
  // 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) => {

    store.state[‘axiosPromiseCancel‘].forEach(e=>{
      e && e()
    });
    store.state[‘axiosPromiseCancel‘] = [];

})

vue axios路由跳转取消所有请求

原文：https://www.cnblogs.com/zhaofeis/p/11422777.html