在实际开发中，我们常常会遇到根据输入框输入的内容，实时去请求接口并将拿到的数据渲染到页面上，但是由于接口响应时间不可控，简单来说就是请求的顺序和响应的顺序不一致，就会导致你可能输入了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) {// 将数据渲染到页面 ... 
}