Axios利用拦截器取消页面切换pending中的请求

我们在开发时 经常会遇到类似场景

• 切换页面时，某些情况导致 当前页面pending中的请求未完成，切换到新页面，之前的请求逻辑还会异常处理

今天，我们解决类似问题：

处理流程：

代码：

vuex定义模块cancel.js

• cancelTokenArr {arr} 用来存储当前请求数据
• addCancelToken {function} 添加请求
• clearCancelToken {function} 取消请求并且清空数组

export default {
    state: {
        cancelTokenArr:[] // 存储cancel token
    },
    mutations: {
        addCancelToken({cancelTokenArr},data){
            cancelTokenArr.push(data)
        },
        clearCancelToken(state){
            state.cancelTokenArr.map(item => {
                item.cancel(`${item.url}---路由切换取消请求`)
            })
            state.cancelTokenArr = []
        }
    }
}

request.js

请求发出前，利用拦截器将取消的cancel函数与当次url利用addCancelToken存储到内存(vuex)中

import axios from 'axios'
import store from '../store'

// 请求拦截器
axios.interceptors.request.use(config => {
   // 请求发出时，添加到cancelTokenArr中
   config.cancelToken = new axios.CancelToken(e => {
       store.commit('addCancelToken', {
           cancel: e,
           url: location.host + config.url
       })
    })
  })
  return config
}, error => {
  Message.error('未知错误')
  return Promise.reject(error)
}）

请求发出后，利用响应拦截器处理取消请求

axios.interceptors.response.use(response => {...},error => {
  // 这里判断异常情况，如果axios.isCancel 为 true时，说明请求被取消
  if (axios.isCancel(error)) {
    // 请求取消
    console.warn(error)
    console.table([error.message.split('---')[0]], 'cancel')
  } else {...}
}

利用router.beforeEach切换路由时取消当前pending中的请求

main.js 或者 router.js

// 切换路由时取消正在pending的请求
router.beforeEach((to, from, next) => {
   store.commit('clearCancelToken')
   next()   
}

总结：

• vuex存储数据
  存储当前的请求函数与url，支持新增清除
• 请求拦截器
  利用vuex数组存储每次发出请求取消函数以及url
• 路由切换前
  取消pending中的请求并且清除当前存储的请求数组

效果：
至此，我们就成功拦截页面切换时pending中的请求

链接：

• Axios：http://www.axios-js.com/zh-cn/docs/
• Vue-Router：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html