zoukankan      html  css  js  c++  java
  • 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的防重放机制有关系,后续了解。

  • 相关阅读:
    ECS内网穿透
    设置服务器ssh会话时间
    VScode插件
    Linux拷贝U盘文件(命令行)
    打开IDM下载视频时弹出防火墙阻止下载,解决方案
    如何将jmeter.bat命令文件固定到任务栏
    jmeter安装教程
    安装JDK8.0(JDK1.8) & 环境变量配置 & idea中配置java路径
    教你不用任何第三方软件实现任务栏居中
    [Unity优化]gc03:代码优化
  • 原文地址:https://www.cnblogs.com/shirleysblog/p/11451571.html
Copyright © 2011-2022 走看看