AbortController

AbortController 是一个构造函数，它实例化后生成的对象，可以使用 AbortSignal 对象来于请求进行通信
- AbortController.signal，是一个只读属性，可以返回一个 AbortSignal 对象来终止网络请求
- AbortController.abort()，该方法可用于中止一个还未接受响应的网络请求，包括 fetch 请求

AbortSignal

AbortSignal 就是一个信号对象
- 它通常与 AbortController 搭配使用，用于终止网络请求
- 它也继承了我们熟悉的 EventTarget 的属性，意味着，我们对网络请求的操作，也是基于 js 事件系统来完成的
- AbortSignal.aborted 是一个只读属性，它表示与当前信号对象关联的请求是被终止
- AbortSignal.onabort，是一个回掉函数，当请求被终止时，它会被调用

Fetch

这个 API 相信大家都不陌生
它是一个现代的获取资源的接口，与 XMLHttpRequest 相比，它支持 promise，也拥有更高的扩展性
接下来使用 fetch 实现一个获取资源的小 demo

const downloadBtn = document.querySelector(".download");

downloadBtn.addEventListener("click", () => {
  fetch("url")
    .then((res) => {
      // do something
    })
    .catch(function (e) {
      console.log(e.message);
    });
});

首先给 download 按钮绑定一个事件
在事件回掉里面，完成 fetch 请求
这是一个标准的 fetch 应用
接下来，结合我们上面介绍的小知识，来终止 fetch 请求

const controller = new AbortController();
const signal = controller.signal;

const downloadBtn = document.querySelector(".download");
const abortBtn = document.querySelector(".abort");

abortBtn.addEventListener("click", function () {
  controller.abort();
  console.log("Download aborted");
});

downloadBtn.addEventListener("click", () => {
  fetch("url", { signal })
    .then((res) => {
      // do something
    })
    .catch(function (e) {
      console.log(e.message);
    });
});

在上面的代码中，增加了构造函数 AbortController 的实例化对象 controller
然后我们将 controller 上的 signal 对象与 fetch 请求绑定起来，只需要以对象形式将 signal 传入 fetch API 的第二个参数即可
然后增加了一个终止请求按钮，并给它绑定了一个事件，在事件回掉里面，调用 controller.abort(); 完成终止 fetch 请求
大家看完这个小 demo，有没有觉得很简单
这里需要提醒大家的一点是，AbortController 这个功能还在实验阶段，在未来有可能被重新修订，所以大家使用时需要经过慎重考虑

最后

AbortController 的分享就到这里，关于它的使用，大家有没有了解了吗 👀
如果觉得文章写的还不错的话，希望大家不要吝惜点赞，大家的鼓励是我分享的最大动力 🥰

已经送出去的请求还能中断吗

AbortController

AbortSignal

Fetch

最后