axios过滤重复请求及批量取消请求

最新推荐文章于 2025-09-24 11:53:59 发布
原创 最新推荐文章于 2025-09-24 11:53:59 发布 · 1.3k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#axios #vue #http #typescript #取消重复请求

本文介绍了一种在Vue.js项目中使用Vuex和axios来管理并取消重复HTTP请求的方法，通过创建请求标识、记录请求状态和批量取消请求，有效防止了网络请求的重复发送。
实现思路：

把每次发送的请求及参数通过CancelToken创建标记添加到vuex的一个列表中，响应完成后从vuex的列表中删除该标记
每次添加标记到列表时先与列表比对是否重复，未重复正常添加，重复则不添加并取消该次请求。
通过循环vuex的请求标记列表，可以批量取消所有请求。

http.ts

该文件封装了axios的请求，对每次的请求通过cancel的createInterceptUrl方法创建标识，然后通过axiosPendingModule的addPending方法记录在vuex的列表中，响应结束后通过cancel的delayRepeatRequest从vuex中移除已经完成的请求

import axios from 'axios';
import qs from 'qs';
import { axiosPendingModule } from '@/store/modules/pending'; //请求连接状态列队
import { CancelToken, createInterceptUrl, cancelRepeatRequest, removePending, delayRemovePending } from './cancel';

//ts接口
interface IParams {
    [key: string]: any;
}

interface IHttp {
    [key: string]: Function;
}

interface IStatusMessage {
    [key: number]: string;
}

/* 通用设置 */
axios.defaults.timeout = 1000 * 30; //请求超时设置，30秒超时
axios.defaults.baseURL = 'http://localhost:8080';

/* 请求拦截 */
axios.interceptors.request.use(
    (config: any) => {
        //每次发送请求前执行过滤取消重复请求
        cancelRepeatRequest(config);

        /* 创建取消请求的token，并把本次请求的信息添加到请求列表 */
        config.cancelToken = new CancelToken((c) => {
            //请求的config.url中不包含baseUrl，但响应中的url会包含baseUrl，处理两者差异使信息保持一致
            let data = { ...config };
            data.url = axios.defaults.baseURL + data.url;

            axiosPendingModule.addPending({
                u: createInterceptUrl(data),
                f: c,
            });
        });

        return config;
    },
    (error: any) => {
        return Promise.reject(error);
    }
);

//错误信息
let errorMessage: any = null;

/* 响应拦截 */
axios.interceptors.response.use(
    (response) => {
        //延迟从列表删除请求标记，相同请求在500毫秒内重复发送将被请求拦截中的cancelRepeatRequest取消发送
        delayRemovePending(response.config, 500);

        //状态码为200表示接口请求成功
        if (response.status === 200) {
            
            //code为0表示结果正常
            if (response.data && response.data.code === 0) {
                return Promise.resolve(response);
            } else {
                //异常状态码提示信息
                errorMessage && errorMessage.close();
                errorMessage = Message({
                    message: response.data.msg || 'Error',
                    type: 'error',
                    duration: 5 * 1000,
                });

                return Promise.reject(response);
            }
        } else {
            return Promise.reject(response);
        }
    },
    (error: any) => {
        if (error.response) {
            removePending(error.response.config); //删除请求信息
    
	    	let statusMessage: IStatusMessage = {
			    400: '错误请求',
			    401: '未授权，请重新登录',
			    403: '拒绝访问',
			    404: '请求错误，未找到该资源',
			    405: '请求方法未允许',
			    408: '请求超时',
			    500: '服务器端出错',
			    502: '网络错误',
			    503: '服务不可用',
			    504: '网络超时',
			    505: 'http版本不支持该请求',
			};
		
	    	let msg = '网络错误';
            if (error.response.data) {
                msg = error.response.data.msg || '连接错误';
            } else if (error.response.status) {
                msg = statusMessage[error.response.status] || '连接错误';
            }    	    
            error.message = statusMessage[error.response.status] || `连接错误${error.response.status}`;
        }
        return Promise.reject(error);
    }
);

/**
 * 公共请求
 * @param {String} type 请求类型
 * @param {String} url 请求的url地址
 * @param {Object} params 请求提交的参数
 */
function commonRequest(type: string, url: string, params: any = {}, config: any = {}) {
    let defaultConfig = {
        headers: { 'Content-Type': 'application/json' },
    };

    config = Object.assign({}, defaultConfig, config);

    return new Promise((resolve, reject) => {
        let axiosParams: Array<any> = []; //axios方法请求的参数

        if (UserModule.token) {
            config.headers['Authorization'] = 'Bearer' + UserModule.token;
        }

        // get、delete共用请求
        if (type === 'get' || type === 'delete') {
            config[type === 'get' ? 'params' : 'data'] = params;
            axiosParams = [url, config];
        } else {
            // post、put、patch共用请求

            //不需要序列化参数的情况
            let notStringify = config.headers['Content-Type'] === 'application/json' || config.headers['Content-Type'] === 'multipart/form-data';

            //需要则qs序列化参数
            if (!notStringify) {
                params = qs.stringify(params, { arrayFormat: 'indices', allowDots: true });
            }
            axiosParams = [url, params, config];
        }
		
		
        (<IParams>axios)[type](...axiosParams).then(
            (res: any) => {
                resolve(res && res.data);
            },
            (err: any) => {
                reject(err);
            }
        );
    });
}

let http: IHttp = {};
let types: Array<string> = ['get', 'post', 'put', 'delete', 'patch'];

types.forEach((type: string) => {
    http[type] = (url: string, params: any, config: any) => {
        return commonRequest(type, url, params, config);
    };
});

export default http;
pending.ts

该文件用于对记录在vuex的请求列表的增、删以及执行取消请求动作

import { VuexModule, Module, Mutation, Action, getModule } from 'vuex-module-decorators';
import store from '@/store';

@Module({ name: 'axiosPending', dynamic: true, namespaced: true, store })
export default class AxiosPending extends VuexModule {
    public pendingList: any[] = [];

    get getPendingList() {
        return this.pendingList;
    }

    /* 添加请求到列表 */
    @Mutation
    private ADD_PENDING(pending: any) {
        this.pendingList.push(pending);
    }

    /* 从列表删除请求 */
    @Mutation
    private REMOVE_PENDING(pending: any) {
        let index = this.pendingList.indexOf(pending);
        index > -1 && this.pendingList.splice(index, 1);
    }

    /* 从列表取消请求 */
    @Mutation
    private CANCEL_PENDING(pending: any) {
        pending.f('取消请求'); //执行取消操作
        //console.log('取消了：' + pending.u);
    }

    /* 添加请求到列表 */
    @Action
    public addPending(pending: any) {
        this.ADD_PENDING(pending);
        //console.log('新增了：' + pending.u);
    }

    /* 从列表删除请求 */
    @Action
    public removePending(pending: any) {
        this.REMOVE_PENDING(pending);
        //console.log('删除了：' + pending.u);
    }

    /* 从列表取消请求 */
    @Action
    public cancelPending(pending: any) {
        this.CANCEL_PENDING(pending);
        this.REMOVE_PENDING(pending);
    }

    /* 取消所有请求 */
    @Action
    public cancelAllPending() {
        for (let i = this.pendingList.length - 1; i >= 0; i--) {
            this.CANCEL_PENDING(this.pendingList[i]);
            this.REMOVE_PENDING(this.pendingList[i]);
        }
    }
}

export const axiosPendingModule = getModule(AxiosPending);
cancel.ts

该文件封装了创建请求标识、移除重复请求、延期请求等一些常用的操作方法

import axios from 'axios';
import qs from 'qs';
import { axiosPendingModule } from '@/store/modules/pending';

/* 取消请求设置 */
export const CancelToken = axios.CancelToken;

/**
 * 创建用于拦截请求的标识，为保证请求信息完整，组合了请求的地址、类型、参数
 * @param {Object} config  axios请求的配置对象
 * @returns {String}  返回用于拦截的字符串标识
 */
export function createInterceptUrl(config: any) {
    //处理FormData不能直接被序列化的问题
    let dataStringify = '';
    //formdata特殊处理
    if (config.data instanceof FormData) {
        let file = config.data.get('file');
        dataStringify = qs.stringify(file);
    } else {
        if (typeof config.data === 'object') {
            dataStringify = qs.stringify(config.data);
        } else if (typeof config.data === 'string') {
            dataStringify = qs.stringify(JSON.parse(config.data));
        } else {
            dataStringify = '';
        }
    }
    let url = config.url + '&' + config.method + '&' + qs.stringify(config.params) + '&' + dataStringify;

    return url;
}

/**
 * 取消重复请求
 * @param {Object} config  请求配置对象
 */
export function cancelRepeatRequest(config: any) {
    let currentPending = createInterceptUrl(config); //本次请求信息

    let pendingList = axiosPendingModule.getPendingList;
    pendingList.some((pending) => {
        let historyPending = pending.u;
        if (currentPending === historyPending) {
            console.log('取消重复请求');
            axiosPendingModule.cancelPending(pending);
        }
    });
}

/**
 * 移除响应完成后列表中对应的请求信息
 * @param {Object} config  请求配置对象
 */
export function removePending(config: any) {
    let currentPending = createInterceptUrl(config); //本次请求信息

    let pendingList = axiosPendingModule.getPendingList;
    pendingList.some((pending) => {
        let historyPending = pending.u;

        if (currentPending === historyPending) {
            axiosPendingModule.removePending(pending);
        }
    });
}

/**
 * 延迟从列表删除请求标记，相同请求不得在短时间内重复发送
 * @param config - 请求对象
 * @param duration - 延时时长
 */
export function delayRemovePending(config: any, duration: number = 500) {
    setTimeout(() => {
        removePending(config);
    }, duration);
}

export default {
    CancelToken,
    createInterceptUrl,
    cancelRepeatRequest,
    delayRemovePending,
    removePending,
};
取消所有请求应用示例
import { axiosPendingModule } from '@/store/modules/pending';

axiosPendingModule.cancelAllPending(); //取消所有请求
vue2 - 实现大文件分片上传+断点续传+进度条+秒传+可暂停继续功能，vue中实现分片大文件上传 切片上传axios大文件支持单个/批量同时上传到服务器（大文件切片上传实现秒传+详细示例源码教程）
高级前端工程师
04-13 1万+
vue超大文件批量同时上传且带进度条，VUE大文件分片切片上传到服务器，Axios大文件上传到后端，可暂停上传点击后继续传，文件分块，上传进度条，Vue大文件上传和断点续传，vue中实现分片大文件上传，前端切片上传文件可暂停，大文件分片上传，暂停续传，vue实现文件分片上传，支持文件分块上传，解决前端超大文件无法上传问题，能够在上传过程中暂停、继续上传的组件，Vue项目中大文件切片上传实现秒传、断点续传的详细实现教程，vue+axios，node后端，上传大文件报错，cors跨域报错，上传失败，文件太大报错
项目封装网络请求、请求拦截和相应拦截
qq_45018844的博客
01-13 849
封装网络请求 这里是写在一个基本的js配置文件中，封装网络请求 // 通用的网络请求，安装axios import axios from "axios"; //设置每个请求的类型，比如post、get、delete，所以要写成活的 export function request(config) { const instance = axios.create({ baseURL: 'https://域名.cn/', //这里是默认的域名 timeout: 5000 /
axios.get传数组之批量删除
weixin_44542401的博客
06-05 1426
axios.get传数组参考：https://www.zhihu.com/question/272032105 今天要做一个批量删除的功能，后台用的是springboot+mybatis-plus，因为service继承了IService类，我们就可以用它（IService）里面的removeByIds方法，这个方法是根据获取id的集合来进行批量删除的。而这个id的集合当然是前端给我们传过来的。废话不多说，上代码。 前端 前端我用的是element+vue.js，如下图要有这种多选框，可以参考官网 获
axios中取消请求及阻止重复请求的方法
热门推荐
harsima的博客
06-26 2万+
这里写自定义目录标题前言核心——CancelToken实际应用和封装一些小细节 前言 在实际项目中，我们可能需要对请求进行“防抖”处理。这里主要是为了阻止用户在某些情况下短时间内重复点击某个按钮，导致前端向后端重复发送多次请求。这里我列举两种比较常见的实际情况： PC端 - 用户双击搜索按钮，可能会触发两次搜索请求 移动端 - 因移动端没有点击延迟，所以极易造成误操作或多操作，造成请求重发 以...
axios并发请求终极指南：Promise.all批量处理技巧
最新发布
gitblog_00885的博客
09-24 1032
你是否遇到过这样的场景：页面加载时需要同时请求用户信息、商品列表、购物车数据等多个接口，传统串行请求导致页面加载缓慢？或者批量操作时需要等待所有请求完成后统一处理结果？本文将系统讲解如何利用Promise.all与axios实现高效并发请求处理，包含错误捕获、请求限制、性能优化等实战技巧，让你的异步请求处理能力提升一个档次。 读完本文你将掌握： - Promise.all与axios结合的5种实...
axios批量处理取消请求
weixin_41308436的博客
04-07 1106
应用场景 登录过期，避免多次弹窗 优化加载速度，当前页面请求还未完成，页面就被切换了 当前请求出错需要中断其它请求 分析 肯定是先去官网看看文档 就是以参数的形式传入cancelToken，拿到回调参数调用就ok 结合项目实现 实际的项目中通常都会封装请求，为了不用在每个请求里面都添加cancelToken，可以在请求拦截器加入cancelToken，实现全局的配置，然后把每个请求的cancelToken写入window下的axiosCancel，伪代码如下 const service = axios
axios cancelToken去除重复请求
weixin_41171651的博客
12-13 369
注：此举不会缓解服务器请求压力，请求仍然会被服务器收到，只是浏览器帮我们过滤掉了我们取消掉的响应。
vue+axios 取消网络请求
Jokerxiuka的博客
05-20 936
【代码】vue+axios 取消网络请求。
前端基于 axios 实现批量任务调度管理器 demo
鹤渺的星球
07-29 1109
这是一个基于 axios 实现的批量任务调度管理器的 demo。它使用了axios、promise 等多种技术和原理来实现批量处理多个异步请求，并确保所有请求都能正确处理并报告其状态。假设有一个场景：有一个任务列表，有单个任务的处理功能，但是用户提出需要增加批量处理任务的需求，那么如果 20 个任务，30 个任务，我们显然可以集成在一次请求里，无非就是服务器处理的压力变大，时间慢一点，但是如果越来越多的任务，用户要等待很久，后端为支持这些，只能改成异步处理，等待时间就很不可控了。
tartare-collections:一个旨在发出 REST 请求的 HTTP 客户端
07-01
8. **批量请求**：支持并发或顺序的批量 API 调用，便于处理多条数据的同步操作。 ### 四、实际应用 Tartare Collections 可用于各种应用场景，如： - **数据获取**：向 RESTful API 获取用户信息、商品列表等。 ...
axios.delete()
07-11
2. 如何取消正在进行的`axios.delete()`请求？ 3. 如何为`axios.delete()`请求添加全局加载指示器？</think>### 在 Vue 组件中使用 async/await 调用 axios.delete() 方法 在 Vue 组件中使用 `async/await` 调用 `...
axios 重复请求，快速点击
ifredom
01-30 2987
起因 一个项目使用的是axios，遇到了用户短时间内，快速点击提交按钮，导致触发了多次请求，提交了多条记录。 解决办法 import axios from "axios"; import md5 from "js-md5"; import { Message } from "element-ui"; import router from "../router"; import { gene...
Vue+Axios:使用拦截器来取消多次重复的请求
aozhou9334的博客
07-28 1041
-----写在前面----- 家园的面试项目接近尾声了，剩下一个大模块（响应式布局）和两个小功能（下拉到一定程度获取新的信息、持续监听返回数据，当有更新时在页面上方提示） 听起来下拉到某个位置获取新信息是不难，但今天就遇到了两个问题： 1. 下拉过程中会不断发起url相同的请求，可能会有被拉黑的风险，并且影响实际性能。最重要的，在then()方法中会将返回数据稍做处理后添加进组件数...
axios 拦截阻止取消重复请求,完整版直接使用
weixin_44484471的博客
09-08 1073
axios 拦截 重复请求, 完全版 复制即可使用
Axios中取消请求及阻止重复请求的方法
weixin_44590591的博客
02-10 2597
Axios中取消请求及阻止重复请求的方法 阻止请求目的： 为了防止用户在网络不好或者其他情况下短时间内重复进行接口请求，从而导致前端向后端重复发送多次请求。 常见情况： PC端：输入框搜素，多次请求接口 移动端：移动端很容易造成误操作或多操作请求（移动端没有点击延迟） 注意：有Loading遮罩时也有可能发生重复请求 新建 axios.js 文件 import axios from "axios"; // import router from "../js/router"; // import {
axios中取消请求及阻止重复请求的方法（防抖点击请求）
pnjtvxcp的博客
06-03 887
前言 在实际项目中，我们可能需要对请求进行“防抖”处理。这里主要是为了阻止用户在某些情况下短时间内重复点击某个按钮，导致前端向后端重复发送多次请求。这里我列举两种比较常见的实际情况： PC端 - 用户双击搜索按钮，可能会触发两次搜索请求 移动端 - 因移动端没有点击延迟，所以极易造成误操作或多操作，造成请求重发 以上情况有可能在有Loading遮罩时依然发生，所以我们要考虑前端阻止重复请求的方法。 核心——CancelToken 在Axios中取消请求最核心的方法是CanelToken...
axios 封装
weixin_41848005的博客
04-19 247
import axios from 'axios'; import { ElLoading, ElMessage } from 'element-plus'; import {getTokenAUTH} from '@/utils/auth'; const pendingMap = new Map(); const LoadingInstance = { _target: null, _count: 0 }; function myAxios(axiosConfig, customOptio.
接口请求相关
weixin_40300870的博客
04-03 374
axios取消重复请求，无感刷新token，自定义实现轮询，控制并发请求数量
fly.js 的二次封装
qq_37550440的博客
07-28 1715
一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、强大的http请求库。可以让您在多个端上尽可能大限度的实现代码复用。flyio的平台支持？目前Fly.js支持的平台包括Node.js、微信小程序、Weex、ReactNative、QuickApp和浏览器，这些平台的JavaScript运行时都是不同的。相比较于axios，flyio支持更多的平台...
用于网络请求的数字数组的网址
07-30
在进行网络请求时，数字数组通常作为请求参数的一部分传递给服务器。这类参数可以出现在 URL 的查询字符串中，也可以作为 POST 请求体的一部分。使用数字数组的 URL 通常用于向服务器传递多个数值参数，例如过滤条件、批量操作标识符等。 一种常见的场景是使用 `GET` 或 `POST` 请求传递数组参数。例如，若要请求一组特定 ID 的资源，URL 可能如下所示： ``` https://api.example.com/data?ids[]=101&ids[]=102&ids[]=103 ``` 或者在某些服务器端配置下，使用不带 `[]` 的形式： ``` https://api.example.com/data?ids=101&ids=102&ids=103 ``` 具体格式取决于后端如何解析参数。在 JavaScript 中，如果使用 `axios` 等库进行请求，可以通过 `qs` 模块来控制数组参数的序列化方式： ```javascript import axios from 'axios'; import qs from 'qs'; axios.get('https://api.example.com/data', { params: { ids: [101, 102, 103] }, paramsSerializer: params => { return qs.stringify(params, { arrayFormat: 'repeat' }); } }); ``` 上述代码会生成如下 URL： ``` https://api.example.com/data?ids=101&ids=102&ids=103 ``` 这种方式适用于需要传递多个数字值的场景，并且可以根据服务器端的期望格式进行调整[^4]。 ### 使用数字数组的典型 URL 示例 1. **获取多个用户信息** ``` GET https://api.example.com/users?ids=1001&ids=1002&ids=1003 ``` 2. **删除多个事件** ``` DELETE https://api.example.com/event/batch/delete?ids=201&ids=202&ids=203 ``` 3. **查询多个订单状态** ``` GET https://api.example.com/orders/status?orderIds=9001&orderIds=9002 ``` 这些 URL 模式广泛应用于 RESTful API 设计中，以支持批量操作和多数据查询需求[^4]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值