当vue切换页面时，尚未完成的接口由于异步原因，会造成报错等等问题，那么这时需要去取消这些接口的执行

首先思路：

页面A请求接口axios1 -->
axios创建CancelToken对象保存请求至store变量CancelTokenArr -->
当切换至页面B -->
进入全局路由守卫调用vuex的清除CancelTokenArr方法 -->
遍历CancelTokenArr清除

涉及的库

• axios
• vuex
• vue-router

++axios++

import store from '../store'
let cancelTokenArr=[] //储存cancel token
// request拦截器
service.interceptors.request.use(
  config => {
    if (store.getters.token) {
        config.headers['X-Token'] = getToken()
        // 在发送请求设置cancel token
        config.cancelToken = new axios.CancelToken(cancel => {
            store.commit('PUSH_CANCEL', {
                cancelToken: cancel
            })
        })
    }
    return config
  },
  error => {
    console.log(error) // for debug
    Promise.reject(error)
  }
)

++vuex++

const axios = {
    state: {
        cancelTokenArr: []
    },

    mutations: {
        PUSH_CANCEL(state, payload){
            state.cancelTokenArr.push(payload.cancelToken);
        },
        
        CLAER_CANCEL({cancelTokenArr}){
        
            cancelTokenArr.forEach(item => {
               item('路由跳转取消请求');
            });
        
            cancelTokenArr = [];
        }
    }
}

export default user

++router++

import store from './store'
router.beforeEach((to, from, next) => {
    store.commit('CLAER_CANCEL'); // 取消请求
    next()
})