vue项目路由跳转时取消未完成请求

vuex store配置 cancelReqToken.js 使用modules属性引用

const state = {
    cancelTokens: {}
}

const mutations = {
    addToken(state, { key, cancel }) {
        state.cancelTokens[key] = cancel
    },
    delToken({ cancelTokens }, key) {
        if (cancelTokens[key]) {
            delete cancelTokens[key]
        }

    },
    cancel({ cancelTokens }, key) {
        if (cancelTokens[key]) {
            cancelTokens[key]('请求取消')
            delete cancelTokens[key]
        }
    },
    cancelAll({ cancelTokens }) {
        Object.keys(cancelTokens).forEach(key => {
            cancelTokens[key]('请求取消')
        })
        cancelTokens = {}
    }
}


export default {
    state,
    mutations,
}

请求拦截器

service.interceptors.request.use(
  config => {
...
//添加取消函数实例，写入store
    config.cancelToken = new axios.CancelToken(function (cancel) {
      store.commit('cancelReqToken/addToken', { key: config.url, cancel })
    })
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

响应拦截器

service.interceptors.response.use(
  response => {
//请求结束则删除取消函数
    store.commit('cancelReqToken/delToken', response.config.url)
  ...
  },
  error => {

  if (error.message == '请求取消') {
      return Promise.reject(error)
    }
//请求错误时也需删除
    store.commit('cancelReqToken/delToken', error.config.url)
  ...
  }
)

路由前置守卫

import store from '@/store'
router.beforeEach(async (to, from, next) => {
//路由跳转前执行所有取消函数
  store.commit('cancelReqToken/cancelAll')
 ...
})

单独取消某请求

//key为请求路径，与请求url参数一直
store.commit('cancelReqToken/cancel',key)