Fetch请求的取消

在实际开发中，我们常常会遇到根据输入框输入的内容，实时去请求接口并将拿到的数据渲染到页面上，但是由于接口响应时间不可控，简单来说就是请求的顺序和响应的顺序不一致，就会导致你可能输入了12，但实际返回给你的是34。

这种需求用防抖和节流是解决不了的，所以就需要用到请求取消。

const input = document.querySelector("input");
input.addEventListener("input", function (e) {
  const v = e.target.value;
  request(v);
});

let controller;
async function request(v) {
  // 判断如果有值就取消
  controller && controller.abort();
  // 创建一个控制器
  controller = new AbortController();
  const list = await fetch(
    "http://www.***.com?kw=" + v,
    {
      // 将控制器关联到每一次请求
      signal: controller.signal,
    }
  )
    .then((res) => res.json())
    .then((res) => res);
  // 调用abort方法来取消请求  
  controller.abort();
  render(list);
}

function render(list) {
  // 将数据渲染到页面 ... 
}