axios多个请求，中断前面的请求，保留最后一个

有时候我们常常在发起一个请求时，希望取消前面的一个或多个请求，就要使用axios的一个方法CancelToken(), 配置方法如下。

第一种方法，使用CancelToken.source工厂创建一个取消令牌：

var CancelToken = axios.CancelToken;
var source = CancelToken.source();
axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});
//取消请求（消息参数是可选的）
source.cancel（'操作被用户取消。'）;

第二种方法，我们可以在拦截器里统一处理取消重复请求

import axios from "axios";
 
window.axiosCancel = []  // 全局定义一个存放取消请求的标识
//请求前拦截
Axios.interceptors.request.use(config => {
    return config
    // 添加取消标记
    config.cancelToken = new axios.CancelToken(cancel => {
        window.axiosCancel.push({
        cancel
    })
 
},function(error) {
    return Promise.reject(error)
});
 
//请求后返回数据拦截
Axios.interceptors.response.use(res => {
        
},function axiosRetryInterceptor(res) {
    return Promise.reject(res )
});
export default Axios

然后在组件中使用，发送一个新的请求之前，取消前面的所有正在请求的请求，如下：

methods:{
    cancel(){ // 设置一个函数，在执行请求前先执行这个函数
        // 获取缓存的 请求取消标识 数组，取消所有关联的请求
        let cancelArr = window.axiosCancel;
        cancelArr.forEach((ele, index) => {
            ele.cancel("取消了请求") // 在失败函数中返回这里自定义的错误信息
            delete window.axiosCancel[index]
        })
    },
    getList(){
        this.cancel()   // 取消所有正在发送请求的请求
        axios.post(..)  // 发送一个新的请求
    }
}

如果不希望每个组件里面都定义一个cancel函数，我们可以把这个函数挂载到vue实例的原型上，这样就可以在任何组件中使用cancel函数了:this.cancel()，如下main.js文件中：

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'//引入store
Vue.config.productionTip = false
 
// 将cancel,挂载到vue原型上
Vue.prototype.cancel = function(){
    // 获取缓存的 请求取消标识 数组，取消所有关联的请求
    let cancelArr = window.axiosCancel || [];
    cancelArr.forEach((ele, index) => {
        ele.cancel("取消了请求")  // 在失败函数中返回这里自定义的错误信息
        delete window.axiosCancel[index]
    })
}
 
window.vm=new Vue({
  el: '#app',
  data(){
    return{
    }
  },
  router,
  store,
  components: { App },
})

另外如果想每次路由页面跳转时，取消上一个页面的所有请求，我们可以把cancel()函数的内容放在路由拦截器中，router/index.js文件配置，如下：

/* 路由拦截器 路由跳转前的操作 */
router.beforeEach((to, from, next) => {
    // 获取缓存的 请求取消标识 数组，取消所有关联的请求
    let cancelArr = window.axiosCancel;
    cancelArr.forEach((ele, index) => {
        ele.cancel("取消了请求")  // 在失败函数中返回这里自定义的错误信息
        delete window.axiosCancel[index]
    })
    next()
})

原文链接：https://blog.youkuaiyun.com/qq_41772754/article/details/88258051