AbortController解决输入框input事件实时查询的异步问题

问题背景

在做输入框的实时查询时，可能第一反应就是使用防抖来处理，但是这样做并不能真正解决问题。

• 比如下面的场景，防抖时间设置为300ms，第一次参数为123的响应结果还是会覆盖12345的响应结果，来个抽象的图

• 节流呢，想想也不能解决这个问题，同样存在前面请求过慢响应覆盖后面请求的问题

解决问题

在请求结果没有返回的情况下，再次请求就需要把上次的请求给取消掉，取消请求相信就没有什么难度了

• fetch请求，MDN参考地址

let controller = null;
function getList() {
 controller && controller.abort()
 controller = new AbortController();
 fetch(url, { signal: controller.signal })
    .then((response) => {
      console.log("Download complete", response);
    })
    .catch((err) => {
      console.error(`Download error: ${err.message}`);
    });
}

• axios，这是从v0.22.0之后的的版本写法，axios中文官网

let controller = null; 
function getList() {
    controller && controller.abort()
    controller = new AbortController();
    axios.get('/foo/bar', { 
        signal: controller.signal
    })
    .then(function(response) { 
        //... 
    });
}

最后

作为解决问题后的一点记录，如发现有误，欢迎评论指正。