vue路由跳转取消请求

路由跳转时，上一个路由里的请求应被取消

axios请求头设置（axios.js）

const CancelToken = axios.CancelToken;
axios.interceptors.request.use(

      config => {
           config.cancelToken = new CancelToken(function(cancel){
            store.commit('pushToken', {
                cancelToken: cancel
            })
          })
      }
)

router/index.js(路由守卫)

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

store.js

//state
cancelTokenArr: [], // 取消请求token数组

//mutation
pushToken(state, payload){

     state.cancelTokenArr.push(payload.cancelToken);
},

clearToken({cancelTokenArr}){

     cancelTokenArr.forEach(item => {
            
           item('路由跳转取消请求');
     });

     cancelTokenArr = [];
}

将取消方法cancel放到数组中，然后在路由守卫中把数组中存有的cancel方法都执行