vue切换路由之前取消页面中的请求

vue切换路由之前取消页面中的请求

在store中配置 store/app.js.

const state = {
  cancelTokenArr: []
}

const mutations = {
  // 添加请求
  ADD_CANCEL_TOKEN(state, cancel) {
    if (!state.cancelTokenArr) {
      state.cancelTokenArr = []
    }
    if (cancel) {
      state.cancelTokenArr.push(cancel)
    }
  },
  // 取消所有请求
  CLEAR_CANCEL_TOKEN(state) {
    console.log(state.cancelTokenArr)
    state.cancelTokenArr.forEach(c => {
      if (c) {
        c()
      }
    })
    state.cancelTokenArr = []
  }
}

const actions = {
  addCancelToken({ commit }, cancel) {
    commit('ADD_CANCEL_TOKEN', cancel)
  },
  clearCancelToken({ commit },) {
    commit('CLEAR_CANCEL_TOKEN')
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

配置 request.js.

// request拦截器
service.interceptors.request.use(config => {
 ...其他代码...
  // 添加至取消列表
  config.cancelToken = new axios.CancelToken(cancel => {
    store.dispatch('app/addCancelToken', cancel)
  })

  return config
}, error => {
    console.log(error)
    Promise.reject(error)
})

配置 router.js.

 ...其他代码...
router.beforeEach((to, from, next) => {
  // 切换路由时先取消所有请求
  store.dispatch('app/clearCancelToken')
  next()
})

参考地址: https://blog.csdn.net/qq_37167049/article/details/133680813