autocomplete调用接口数据实现

开发中遇到需要对大量数据实时搜索，频繁调取api产生的问题记录

1、每输入一个字符，就向后端发一次请求。当输入完一个人名的时候，就已经向后端发送了好多条请求，太多的请求会给服务器带来压力，其实在实时搜索过程中也并不需要发太多请求；
2、由于这些请求都是异步的，虽然发送请求时有先后顺序，但是返回的结果并不会按照发送请求那样有个先后顺序，而是哪个先匹配出结果哪个就先返回，后返回来的结果会将先返回来的结果覆盖，这样导致在最后输入完之后，发现下面展示的并不是最终的搜索结果。例如当输完“libai”时，下方展示的内容并不是“libai”对应的内容，而是“li”对应的内容。

解决方法：

1、减少请求次数
将发送请求的命令放入到定时器setTimeout中，然后通过定时器来限制向后端发送请求的次数。例如：规定在输入完一个字符后，如果300ms内没有继续输入，那么300ms后就发送一次请求；如果在300ms内继续输入了内容，那么就会删除上次定时器，重新开始计时，直到300ms内没有继续输入时再发送请求。这样就减少了一些不必要的请求

实例：

searchVague(val) {
if (this.timer) {
clearTimeout(this.timer);
}
if (val) {
this.timer = setTimeout(() => {
this.getData(val);
}, 300);
} else {
// 输入框中的内容被删为空时触发，此时会清除之前展示的搜索结果
}
}

2.请求顺序返回保证结果匹配

从上面已知请求是异步的，发送请求时是按照先后顺序的，返回的结果的顺序则是难以预料的，导致出现最终想要的搜索结果被之前的请求返回结果覆盖。为了解决上述问题，我们需要让返回的结果也有个先后顺序，即先请求的先返回，如果在发送下一次请求时，上一次请求还没结束，那么就取消上一次的发送请求。查了一下，应该和防止重复提交请求：可以采用请求队列的方式，每次请求时检查队列中有无该请求，有则返回，无则提交，并将该请求添加到队列，响应完毕，将响应的请求从队列中移除。api的防重放机制有关系，后续了解。

转载于:https://www.cnblogs.com/shirleysblog/p/11451571.html