vue 请求竞态 中断请求 解决切换表格数据,数据发生错乱

devtools/2024/10/18 8:20:28/

//1,声明缓存请求的集合
const pendingRequest = new Map();
//2,请求url和method生成key
const generateRequestKey = <T extends AxiosRequestConfig>(config: T) => {const { method, url } = configreturn [method, url].join("&")
}
//3,缓存正在pending状态的请求
const addPendingRequest = (config: AxiosRequestConfig) => {const requestKey = generateRequestKey(config)// 判断是否正在pending中if (pendingRequest.has(requestKey)) {const controller = pendingRequest.get(requestKey)//终止请求controller.abort()pendingRequest.delete(requestKey)}// 添加请求const controller = new AbortController()config.signal = controller.signalpendingRequest.set(requestKey, controller)
}
// 4,删除缓存的请求
const removePendingRequest = (config: AxiosRequestConfig) => {const requestKey = generateRequestKey(config)if (pendingRequest.has(requestKey)) {pendingRequest.delete(requestKey)}
}

在请求拦截器里添加

// 添加请求拦截器
service.interceptors.request.use((config) => {addPendingRequest(config)// 在发送请求之前做些什么return config;
}, function (error) {// 对请求错误做些什么return Promise.reject(error);
});

在响应拦截器里移除

// 添加响应拦截器
service.interceptors.response.use((response: any) => {removePendingRequest(response.config)
})

http://www.ppmy.cn/devtools/125405.html

相关文章

【Android】在安卓中使用 `mobile-ffmpeg` 压缩后的视频,浏览器在线播放提示“没有找到支持的视频格式和 MIME 类型”的解决方案

在安卓中使用 mobile-ffmpeg 压缩后的视频&#xff0c;浏览器在线播放提示“没有找到支持的视频格式和 MIME 类型”的解决方案 你可能在安卓开发中使用了 mobile-ffmpeg 进行视频压缩&#xff0c;而当你尝试在浏览器中在线播放压缩后的视频时&#xff0c;看到提示&#xff1a;…

【算法思想·二叉树】用「遍历」思维解题 II

本文参考labuladongsuanfa笔记[【强化练习】用「遍历」思维解题 II | labuladong 的算法笔记] 如果让你在二叉树中的某些节点上做文章&#xff0c;一般来说也可以直接用遍历的思维模式。 270. 最接近的二叉搜索树值 | 力扣 | LeetCode | 给你二叉搜索树的根节点 root 和一个目…

python:假的身份信息生成模块faker

前言 发现一个有趣的python模块&#xff08;faker&#xff09;&#xff0c;他支持生成多个国家语言下的假身份信息&#xff0c;包含人名、地址、邮箱、公司名、电话号码、甚至是个人简历&#xff01; 你可以拿它做一些自动化测试&#xff0c;或一些跟假数据有关的填充工作。 代…

机器学习笔记(五)--神经网络

神经元网络&#xff1a;M-P神经元模型 神经元接收来自其他n个神经元传递过来的信号&#xff0c;这些信号通过有权重的连接进行传递&#xff0c;神经元接收到的总输入值将与神经元的阈值进行对比&#xff0c;通过激活函数的处理产生神经元的输出。 感知机与多层网络 感知机&a…

如何恢复笔记本电脑上误删除的谷歌浏览器数据

在使用笔记本电脑的过程中&#xff0c;有时我们可能会不小心删除了重要的谷歌浏览器数据&#xff0c;如书签、历史记录或保存的密码。本文将详细介绍如何在笔记本上恢复这些误删除的数据&#xff0c;帮助你找回丢失的信息。&#xff08;本文由https://www.gugeliulanqi.com.cn/…

java web 之过滤器Filter

1、概念 当访问服务器的资源时&#xff0c;Filter过滤器可以将请求拦截下来&#xff0c;完成一些特殊的功能。 通常都是用来拦截request进行处理的&#xff0c;也可以对返回的response进行拦截处理。 一般用于完成通用的操作。如&#xff1a;登录验证、统一编码处理、敏感字…

鸿蒙--商品列表

这里主要利用的是 List 组件 相关概念 Scroll:可滚动的容器组件,当子组件的布局尺寸超过父组件的视口时,内容可以滚动。List:列表包

2024 第一次周赛

A: 题目大意 骑士每连续 i 天每天会得到 i 个金币&#xff0c;&#xff08;i 1&#xff0c; 2&#xff0c; 3 &#xff0c; …&#xff09;,那么展开看每一天可以得到的金币数&#xff1a;1 2 2 3 3 3 4 4 4 5 5 5 5 5 … 可以发现就是1个1 &#xff0c;2个2, 3个3…,那么我…