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

server/2024/10/18 16:51:31/

//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/server/131405.html

相关文章

MySQL 删除数据表

MySQL中删除数据表是非常容易操作的&#xff0c; 但是你再进行删除表操作时要非常小心&#xff0c;因为执行删除命令后所有数据都会消失。 语法 删除MySQL数据表的通用语法&#xff1a; DROP TABLE table_name ;在命令提示窗口中删除数据表 在mysql>命令提示窗口中删除数据…

SwiftUI 6.0(iOS 18)新增的网格渐变色 MeshGradient 解惑

概述 在 SwiftUI 中&#xff0c;我们可以借助渐变色&#xff08;Gradient&#xff09;来实现更加灵动多彩的着色效果。从 SwiftUI 6.0 开始&#xff0c;苹果增加了全新的网格渐变色让我们对其有了更自由的定制度。 因为 gif 格式图片自身的显示能力有限&#xff0c;所以上面的…

linux线程 | 线程的控制(二)

前言&#xff1a; 本节内容是线程的控制部分的第二个小节。 主要是列出我们的线程控制部分的几个细节性问题以及我们的线程分离。这些都是需要大量的代码去进行实验的。所以&#xff0c; 准备好接受新知识的友友们请耐心观看。 现在开始我们的学习吧。 ps:本节内容适合了解线程…

如何减少光伏电站中的重复工作

一、优化设计与规划 详细的前期调研&#xff1a; 在项目启动前&#xff0c;进行详尽的现场调研&#xff0c;包括地形、气候、土壤条件等&#xff0c;确保设计方案与实际情况相符。评估电网接入条件&#xff0c;确保电站容量与电网需求相匹配&#xff0c;避免后期因电网接入问…

【公共祖先】二叉树专题

里面涉及多个plus题 前言1.二叉树的最近公共祖先2.二叉搜索树的最近公共祖先3.二叉树的最近公共祖先II4.二叉树的最近公共祖先III5.二叉树的最近公共祖先IV 前言 公共祖先这一类题目&#xff0c;难度不大&#xff0c;但是非常实用&#xff0c;也是面试问到概率比较大的一类题目…

前端处理磁盘数据的严格形式

想要处理这个数据首先我们需要知道什么是磁盘和磁盘的存储单位。 磁盘是计算机中存储数据的硬件。存储格式指的是磁盘采用的存储方式和结构。 磁盘存储单位常用包括以下几类&#xff1a; 位&#xff1a;二进制位&#xff0c;为0或者1。位是计算机的最小存储单位。 字节&#…

链表(4)_合并K个升序链表_面试题

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 链表(4)_合并K个升序链表_面试题 收录于专栏【经典算法练习】 本专栏旨在分享学习算法的一点学习笔记&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目录…

Git进行版本控制操作流程

目录 一、初始化仓库 操作流程 二、添加到缓存区 三、提交到版本库 四、推送至远程仓库 生成SSH密钥 将本地库中内容推送至已经创建好的远程库 推送 推送错误 第一种&#xff1a; 五、克隆 克隆整个项目 拉去最新代码 六、分支 1. 初始化仓库或克隆远端仓库 2…