axios批量处理取消请求

应用场景登录过期，避免多次弹窗优化加载速度，当前页面请求还未完成，页面就被切换了当前请求出错需要中断其它请求分析肯定是先去官网看看文档就是以参数的形式传入cancelToken，拿到回调参数调用就ok结合项目实现实际的项目中通常都会封装请求，为了不用在每个请求里面都添加cancelToken，可以在请求拦截器加入cancelToken，实现全局的配置，然后把每个请求的cancelToken写入wi

小陆pro

968人浏览 · 2022-04-07 11:14:48

小陆pro · 2022-04-07 11:14:48 发布

应用场景

登录过期，避免多次弹窗
优化加载速度，当前页面请求还未完成，页面就被切换了
当前请求出错需要中断其它请求

分析

肯定是先去官网看看文档
可以看到，原理就是以参数的形式传入cancelToken，拿到回调参数调用就ok
在这里插入图片描述

结合项目实现

实际的项目中通常都会封装请求，为了不用在每个请求里面都添加cancelToken，可以在请求拦截器加入cancelToken，实现全局的配置，然后把每个请求的cancelToken写入window下的axiosCancel，伪代码如下

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, 
  timeout: 30000 
})
service.interceptors.request.use(
  config => {
    config.cancelToken  = new axios.CancelToken(cancel => {
      if(!window.axiosCancel)window.axiosCancel = []
      window.axiosCancel.push({cancel})
    })
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

封装取消请求的方法

function cancelAjax(mes = ''){
  let cancelArr = window.axiosCancel;
  cancelArr = cancelArr || [];
  cancelArr.forEach((ele, index) => {
    ele.cancel(mes || '登录过期或登录已失效，需要重新登录')
    delete window.axiosCancel[index]
  })
}

为了方便调用，也可以把它写入Vue的原型里面

Vue.prototype.$cancelAjax = cancelAjax

使用方法
在需求取消请求的地方直接调用cancelAjax方法即可批量取消已发送的请求
如登录过期时，可以在响应拦截器上处理，伪代码如下

service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code === 401) {
      cancelAjax()//登录过期，直接取消已发送的请求，避免多次弹窗
      Message.error('登录过期，请重新登录')
      return Promise.reject(new Error(res.msg || 'Error'))
    }
    return res
  },
  error => {
    return Promise.reject(error)
  }
)