中断请求AbortController

面试中有被问到fetch手动取消
可怜的我使用axios比较多，也只是copy代码没时间研究原理
今天有时间研究下
场景: 连续发送多次请求，只需要最后一次结果，模糊搜索，下载视频取消

axios中的请求中断

//VUE
 sendStr() {
      if(window.cancel) window.cancel()
      let CancelToken = axios.CancelToken;
      // let cancel
      axios
        .get(`http://localhost:3000/test?str=${this.searchStr}`, {
          cancelToken: new CancelToken(function executor(c) {
          window.cancel = c;
          })
        })
        .then(res => {
          window.console.log(res);
          window.cancel = null
        })
    }

再相应间隔长的情况下，可以看到input事件中请求了五次，前几次都中断了，只保留最后一次

image.png

同样的方法，将后台定时器删掉，因为相应速度大于input事件触发间隔所以数据都成功返回

image.png

fetch手动中断

fetch是一种原生HTTP数据请求的方式，是xml的替代方案，和axios类似同样使用了 JavaScript Promises 来处理结果/回调:

AbortController对象

根据文档说明我们可以了解到
AbortController接口代表一个控制器对象，允许你在需要时中止一个或多个Web(网络)请求。

你可以使用AbortController.AbortController()构造函数创建一个新的AbortController对象。 使用AbortSignal 对象完成与Web(网络)请求的通信。

简单来说就是创建一个AbortController对象abortController，然后使用abortController.signal生成关联变量再添加到fetch请求参数中去，然后想要中断的时候使用关联该请求的abortController.abort()方法是使该请求中断

   download() {
      this.downloadController = new AbortController();
      this.signal = this.downloadController.signal;
      fetch(`http://localhost:3000/test?str=${this.searchStr}`, {
        signal: this.signal
      })
        .then(res => {
          window.console.log(res);
        })
        .catch(err => {
          window.console.log(err);
        });
    },
    termination() {
      this.downloadController.abort();
    }

中断如下

image.png

...未完待续(有时间封装的话)