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

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

阅读 2.9k
3 个回答

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

举例:

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

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

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

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

方案一:
xhr和fetch都支持abort(中止),可以了解下相关的解决方案

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题