axios批量处理取消请求

应用场景

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

分析

肯定是先去官网看看文档
可以看到，原理就是以参数的形式传入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)
  }
)