远程搜索，怎么样保证数据的顺序不是错乱的？

Question

在制作远程搜索组件时，输入数据以后，如果由于网络不好导致前面的数据在后面数据先返回。怎么样才能保证返回的数据是绝对正确的，不会由于网络等原因发生顺序错乱。

Answer 1

利用变量作用域的特性，可以每次异步请求前记录一下当前加载的标识值（可以用关键词或者别的能标识的东西充当），异步结束后判断一下改值是否变化即可。

举例：

{
   data: {
       inputVal: '' // 关键词输入框双向绑定的值
   },
   
   fetchData() { // 执行搜索的方法
       let key = this.inputVal.toString();
       request() // request 是你封装的异步请求
          .then(() => {
              if (this.inputVal !== key) {
                  return; // 表明输入的值在请求前后已经发生变化，那么跳过后续业务逻辑
              }
              
              // balabala...
          });
   }
}

当然了，必要的函数防抖策略还是要有的。

Answer 2

在你触发远程搜索的地方加一个变量表达version，然后端配合一下响应中带上请求的version，然后你就可以抛弃掉一些不需要的响应了。

当然如果后端不愿意配合。。。看看别人有没有好的想法

Answer 3

方案一：
xhr和fetch都支持abort（中止），可以了解下相关的解决方案

方案二：
每次请求前保存一个uuid，请求完成后，将该次请求的uuid和最新的uuid比较