vue axios 取消上一次（重复）请求

最新推荐文章于 2025-09-26 14:43:19 发布

原创最新推荐文章于 2025-09-26 14:43:19 发布 · 2.3k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

vue 同时被 2 个专栏收录

3 篇文章

订阅专栏

axios

1 篇文章

订阅专栏

这篇博客介绍了如何利用axios的CancelToken功能来管理并取消重复的HTTP请求。通过创建一个Map存储请求的取消标识，在请求拦截器中移除重复请求，并在响应拦截器中移除已响应的请求，实现请求的唯一性，提高应用性能。

思路：

1.定义一个Map用来存储发送请求的取消【函数】标识。

2.在请求拦截器中，移出重复的请求【重复请求是指：方法 + 路径 + 入参相同】。

3.在请求拦截器中，发送请求前存储取消标识到Map中。

4.在响应拦截器中，移出请求。

import axios  from "axios";
let pendingMap = new Map();

/**
 * 取消正在发送的请求
 * @param {*} config 
 */
let removePending = function(config){
    var key = `${config.method}:${config.url}:${JSON.stringify(config.params)}`;
    var func = pendingMap.get(key);
    if(func){
        func();
        pendingMap.delete(key);
    }
}

// 创建axios实例
const baseURL = "/api";
const requests = axios.create({
    baseURL:baseURL,
    timeout:5000
});

//请求拦截器
requests.interceptors.request.use((config) =>{
    removePending(config);
    // config 中包含 headers 请求头
    config.headers.Authorization = `Bear ${ sessionStorage.getItem("token")}`;

    // 发送请求,并将请求的取消标识放入pendingMap中
    config.cancelToken = new axios.CancelToken((cancelToken) => {
        pendingMap.set(`${config.method}:${config.url}:${JSON.stringify(config.params)}`,cancelToken)
    });
    return config;
});

//响应拦截器
requests.interceptors.response.use((res) => {
    // 请求成功移出请求
    removePending(res.config);
    return res.data;
},(error) => {
    return Promise.reject(error);
});

export default requests;