vue项目路由跳转结束当前请求

首先在create_api.js增加window变量

window.requestList = []

记录每次请求CancelToken

let CancelToken = axios.CancelToken

axios.interceptors.request.use(res => {

//在请求配置中增加

config.cancelToken = new CancelToken(function(cancel) {

    window.requestList.push({cancelToken: cancel})

//然后再 return config

})

再请求失败中进行判断

axios.interceptors.response.use(res => {
//请求成功数据处理

   return Promise.reject(res)

}, err => {

  if (axios.isCancel(err)) {
      // 取消请求
      return Promise.reject(err)
    } else {
      // 处理错误
      iView.Notice.error({
        title: '系统异常',
        desc: '请稍后尝试'
      })
      return Promise.reject(err)
    }

})

请求方法中

axios.post(urls).then(res => {
   //请求成功
}).catch(thrown => {
    // 请求失败 判断是否取消请求
   if (!axios.isCancel(thrown)) {
       // 处理错误
       reject(thrown)
   }
})

遍历路由时候判断

router.beforeEach((to, form, next) => {

   store.commit('clearToken')

})

mutations.js中增加store处理方法

clearToken (state) {  
  window.requestList.forEach(item => {
    item.cancelToken('路由跳转,取消请求')
  })
window.requestList = []

})