前端频繁请求接口

Question

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

如果没有这个搜索按钮。只有一个input框(实时搜索)呢？即便是函数截流也会导致这个覆盖的问题(网络延迟)

Answer 1

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

Answer 2

一、对于前端防止重复点击按钮：可以采用一点击一次后让按钮置灰，暂时不可以用，响应结束后再可以用。防止重复提交请求：可以采用请求队列的方式，每次请求时检查队列中有无该请求，有则返回，无则提交，并将该请求添加到队列，响应完毕，将响应的请求从队列中移除。二、安全方面，需要前后端协同处理推荐您看一下说说API的防重放机制目前我们公司就采用这些方式！

Answer 3

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

Answer 4

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

Answer 5

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