取消重复请求
取消重复请求是一个前端项目中很常见的网络请求优化手段,他主要是为了防止短时间内发送了多个一模一样的请求,导致性能的消耗~
23k star 的项目是怎么做的?
github 上有一个很火的项目,叫做Vben-Admin,是一个非常出色的后台管理系统模板,但是个人觉得它的取消重复请求做的一塌糊涂(下面会说理由)!!!
由于项目中源代码比较多,我尽量简化了代码,给大家展示一下它是怎么去实现这个功能的
我先说一下它实现这个功能的思路:
简化后的代码如下
接着在页面中使用
假如我点击了三次,那么它会将我前面的两次取消掉,只让第三次请求成功,从而实现取消重复请求的功能~
但是这个方案缺陷真的很大,比如看下面的例子,我不止一个按钮调用了,我有两个按钮去调用这个接口
我先点击了按钮1,再点击按钮2,发现它把我按钮1的请求取消掉了,只请求了按钮2的请求,其实这是没错的,但是错就错在,它取消了按钮1的请求,但是连着按钮1点击事件接下来的代码都中断掉了!!!!
可以发现,控制台没有打印按钮1的结果,只打印了按钮2的结果!!!
这显然是不合理的,我们取消重复请求只是为了减少网络资源、性能的消耗,但是可不想因为这个优化,而影响了我们原本的逻辑~
其实上面的按钮1、按钮2,也可以类比为页面1、页面2,两个页面在短时间内发起了同一个请求,你直接去把页面1的后续逻辑都中断了,这不是一个好的方案!!!
并且其实不合理的地方还有:Method + Url当做 key,确实不太合理(但是本文暂且不关注这点)
自己思考怎么做~
想了一下,不能用上述的方案来做,缺陷太大了,自己想的方式就是不取消请求了!而是直接不发请求!大概的思路如下:
简化后的代码如下:
结果如下,按钮1、按钮2各自的后续逻辑会继续进行
且请求只会发出一次
第一个请求报错了咋办?
我这个方案是以第一个请求为主的,那么,如果第一个请求失败了,那后续的重复请求就爷跟着失败吗?显然是不对的~
第一个请求失败之后,我们必须让后续的请求再重新走一次流程才对,就像是一切都没发生过一样!
只需要在后续重复请求的错误回调中,重新执行请求即可,这样又能重新来过了!!!
可以看到,就算前面的失败了,后面的照样能自己发起请求进行自救
有完善的空间
以上只是我根据自己思路写出的一个粗略版本,如果大家有自己其他的顾虑,可以进行修改精进!
本网站的文章部分内容可能来源于网络和网友发布,仅供大家学习与参考,如有侵权,请联系站长进行删除处理,不代表本网站立场,转载者并注明出处:https://www.jmbhsh.com/shenghuokepu/34038.html