vue之中 axios的取消上一次等待的请求（同一个请求，不同参数）_axios取消同一个请求不同参数的上一次请求-优快云博客

vue之中 axios的取消上一次等待的请求（同一个请求，不同参数）

转载

拦截器里统一处理取消重复请求


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(..)  // 发送一个新的请求
    }
}