素材牛VIP会员
前端频繁请求接口
 Al***ay  分类:JavaScript  人气:1198  回帖:6  发布于6年前 收藏

在做一个vue项目的时候发现一个问题,就是有一个根据input搜索框的值来查询数据的页面。
在快速点击搜索按钮2次或者多次之后。由于网咯的原因。可能导致最后一次点击查询按钮返回的值被前面的请求结果给覆盖了。。这种情况应该怎么解决呢。。只想保留最新一次发起的请求。

 标签:javascript

讨论这个帖子(6)垃圾回帖将一律封号处理……

Lv4 码徒
Su***er JS工程师 6年前#1

可以参考redux-saga的思路,takeLatest

Lv3 码奴
起***劲 页面重构设计 6年前#2

一、对于前端

防止重复点击按钮:可以采用一点击一次后让按钮置灰,暂时不可以用,响应结束后再可以用。
防止重复提交请求:可以采用请求队列的方式,每次请求时检查队列中有无该请求,有则返回,无则提交,并将该请求添加到队列,响应完毕,将响应的请求从队列中移除。

二、安全方面,需要前后端协同处理

推荐您看一下说说API的防重放机制

目前我们公司就采用这些方式!

Lv5 码农
16***50 软件测试工程师 6年前#3

防止重复点击按钮,获取到想要的数据以后,禁用按钮,这样还可以节省流量

Lv1 新人
鬼***5 UI设计师 6年前#4

锁,点击后,立刻disable掉搜索按钮,结果出来后在去掉disable。或者,程序中加个锁。

Lv4 码徒
pe***ei 移动开发工程师 6年前#5

http://www.alloyteam.com/2012...

Lv7 码师
ph***16 JAVA开发工程师 6年前#6

设置一个id,每次开始ajax请求前更新这个id并在scope中保留副本,并取消前次ajax请求。请求结束后查询该id是否与本次请求的id对应,否的话就抛弃本次response
节流函数适合避免短时间内多次请求,但是并不能保证请求返回后按顺序更新UI

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取