当前位置：首页 > 科技 > 软件

23k star超火项目，请求优化写的一塌糊涂！我直接重构！

来源：责编：时间：2024-06-14 17:39:44 102观看

导读取消重复请求取消重复请求是一个前端项目中很常见的网络请求优化手段，他主要是为了防止短时间内发送了多个一模一样的请求，导致性能的消耗~23k star 的项目是怎么做的？github 上有一个很火的项目，叫做 Vben-Admin，是一个非

取消重复请求

取消重复请求是一个前端项目中很常见的网络请求优化手段，他主要是为了防止短时间内发送了多个一模一样的请求，导致性能的消耗~

23k star 的项目是怎么做的？

github 上有一个很火的项目，叫做 Vben-Admin，是一个非常出色的后台管理系统模板，但是个人觉得它的取消重复请求做的一塌糊涂（下面会说理由）！！！

由于项目中源代码比较多，我尽量简化了代码，给大家展示一下它是怎么去实现这个功能的

我先说一下它实现这个功能的思路：

1、维护一个 Map：key 是请求的 Method + Url，value 是这个请求的取消方法
2、请求拦截器中：先清除掉 Map 中此请求 Method + Url 的存储，也就是取消掉前面的重复请求，然后再进行本次请求
3、响应拦截器：清除掉本次请求的存储，确保不影响下一次的判断

简化后的代码如下

图片

接着在页面中使用

图片

假如我点击了三次，那么它会将我前面的两次取消掉，只让第三次请求成功，从而实现取消重复请求的功能~

图片

但是这个方案缺陷真的很大，比如看下面的例子，我不止一个按钮调用了，我有两个按钮去调用这个接口

图片

我先点击了按钮1，再点击按钮2，发现它把我按钮1的请求取消掉了，只请求了按钮2的请求，其实这是没错的，但是错就错在，它取消了按钮1的请求，但是连着按钮1点击事件接下来的代码都中断掉了！！！！

图片

可以发现，控制台没有打印按钮1的结果，只打印了按钮2的结果！！！

图片

这显然是不合理的，我们取消重复请求只是为了减少网络资源、性能的消耗，但是可不想因为这个优化，而影响了我们原本的逻辑~

其实上面的按钮1、按钮2，也可以类比为页面1、页面2，两个页面在短时间内发起了同一个请求，你直接去把页面1的后续逻辑都中断了，这不是一个好的方案！！！

并且其实不合理的地方还有：Method + Url当做 key，确实不太合理（但是本文暂且不关注这点）

自己思考怎么做~

想了一下，不能用上述的方案来做，缺陷太大了，自己想的方式就是不取消请求了！而是直接不发请求！大概的思路如下：

1、维护一个Map：key 是请求的 Method + Url，value 第一次请求的 Promise
2、第一次请求时，生成一个 Promise，存储在 Map 中
3、第一次请求响应之后，修改 Promise 的状态，并把响应数据传给 Promise
4、后续的重复请求以第一次请求的 Promise 为准，确保能复用数据，且不影响各自的后续逻辑

简化后的代码如下：

图片

结果如下，按钮1、按钮2各自的后续逻辑会继续进行

图片

且请求只会发出一次

图片

第一个请求报错了咋办？

我这个方案是以第一个请求为主的，那么，如果第一个请求失败了，那后续的重复请求就爷跟着失败吗？显然是不对的~

第一个请求失败之后，我们必须让后续的请求再重新走一次流程才对，就像是一切都没发生过一样！

只需要在后续重复请求的错误回调中，重新执行请求即可，这样又能重新来过了！！！

图片

可以看到，就算前面的失败了，后面的照样能自己发起请求进行自救

图片

有完善的空间

以上只是我根据自己思路写出的一个粗略版本，如果大家有自己其他的顾虑，可以进行修改精进！

本文链接：http://www.28at.com/showinfo-26-93864-0.html23k star超火项目，请求优化写的一塌糊涂！我直接重构！

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： JavaScript如何实现判断只能输入数字

下一篇：从 Prometheus 到 OpenTelemetry：指标监控的演进与实践

标签：

热门焦点

7月安卓手机好评榜：三星S23Ultra好评率第一

性能榜和性价比榜之后，我们来看最后的安卓手机好评榜，数据来源安兔兔评测，收集时间2023年7月1日至7月31日，仅限国内市场。第一名：三星Galaxy S23 Ultra好评率：95.71%在即将迎来新
6月安卓手机性价比榜：Note 12 Turbo断层式碾压

6月份有一个618，虽然这是京东周年庆的日子，但别的电商也都不约而同的跟进了，反正促销没坏处，厂商和用户都能满意。618期间一些产品也出现了历史低价，那么各个价位段的产品性价比
十个可以手动编写的 JavaScript 数组 API

JavaScript 中有很多API，使用得当，会很方便，省力不少。你知道它的原理吗? 今天这篇文章，我们将对它们进行一次小总结。现在开始吧。1.forEach()forEach()用于遍历数组接收一参
K8S | Service服务发现

一、背景在微服务架构中，这里以开发环境「Dev」为基础来描述，在K8S集群中通常会开放：路由网关、注册中心、配置中心等相关服务，可以被集群外部访问；图片对于测试「Tes」环境或者
零售大模型“干中学”，攀爬数字化珠峰

文/侯煜编辑/cc来源/华尔街科技眼对于绝大多数登山爱好者而言，攀爬珠穆朗玛峰可谓终极目标。攀登珠峰的商业路线有两条，一是尼泊尔境内的南坡路线，一是中国境内的北坡路线。相
得物宠物生意「狂飙」，发力“它经济”

作者｜花花小萌主近日，得物宣布正式上线宠物鉴别，通过得物App内的“在线鉴别”，可找到鉴别宠物的选项。通过上传自家宠物的部位细节，就能收获拥有专业资质认证的得物鉴
ESG的面子与里子

来源 | 光子星球撰文 | 吴坤谚编辑 | 吴先之三伏大幕拉起，各地高温预警不绝，但处于厄尔尼诺大“烤”之下的除了众生，还有各大企业发布的ESG报告。ESG是“环境保
DRAM存储器10月价格下跌，NAND闪存本月价格与上月持平

10月30日，据韩国媒体消息，自今年年初以来一直在上涨的 DRAM 存储器的交易价格仅在本月就下跌了近 10％，此次是全年首次降价，而NAND 闪存本月价格与上月持平。市
北京：科技教育体验基地开始登记

　　北京“科技馆之城”科技教育体验基地登记和认证工作日前启动。首批北京科技教育体验基地拟于2023年全国科普日期间挂牌，后续还将开展常态化登记。　　北京科技教育体验基