搜索建议优化方案

背景

在搜索框中，用户输入关键词后，服务器会根据关键词自动补全，并展示在搜索框下方的下拉列表中，如果用户输入的很快，我们应该每个请求都发吗？请求的顺序是否能与响应的顺序一致？

目标

保证用户输入的关键词与服务器返回的关键词顺序一致。
减少请求次数。

方案

使用防抖

也就是在一段时间内只发送最后一次请求，一段时间内连续请求会取消上一次的请求。
那如果用户在请求成功发送，服务器还没响应的期间再次发送请求呢？服务器能保证响应的顺序吗？
所以防抖也没解决根源性问题。

使用节流

也就是在一段时间内只发送第一次请求，后续请求不在处理。
用户快速输入节流无法处理。

优解方案

在每次请求放送时，取消上一次的请求。

const search = document.querySelector("#app .search");
//创建一个控制器
let controller;
search.onchange = async (e) => {
  //取消上一次的请求
  controller && controller.abort();
  controller = new AbortController();
  const res = await fetch(
    "http://localhost:3000/search?keyword=" + e.target.value,
    {
      method: "GET",
      //关联控制器
      signal: controller.signal,
    }
  );
  const data = await res.json();
  console.log(data);
};