正如我们所知道的，fetch 返回一个 promise。JavaScript 通常并没有“中止” promise 的概念。那么我们怎样才能中止 fetch 呢？

    为此有一个特殊的内建对象：AbortController，它不仅可以中止 fetch，还可以中止其他异步任务。

    用法很简单：

    • Step 1：创建一个控制器（controller）：

      1. let controller = new AbortController();

      控制器是一个极其简单的对象。

      • 它具有单个方法 abort()，和单个属性 signal。
      • 当 abort() 被调用时：
        • abort 事件就会在 controller.signal 上触发
        • controller.signal.aborted 属性变为 true。

      任何对 abort() 调用感兴趣的人，都可以在 controller.signal 上设置监听器来对其进行跟踪。

      就像这样（目前还没有 fetch）：

      1. let controller = new AbortController();
      2. let signal = controller.signal;
      4. // 当 controller.abort() 被调用时触发
      5. signal.addEventListener('abort', () => alert("abort!"));
      7. controller.abort(); // 中止！
      9. alert(signal.aborted); // true

    • Step 2：将 signal 属性传递给 fetch 选项：

      1. let controller = new AbortController();
      2. fetch(url, {
      3.   signal: controller.signal
      4. });

      fetch 方法知道如何与 AbortController 一起使用，它会监听 signal 上的 abort。

    • Step 3：调用 controller.abort() 来中止：

      1. controller.abort();

      我们完成啦：fetch 从 signal 获取了事件并中止了请求。

    当一个 fetch 被中止，它的 promise 就会以一个 error AbortError reject，因此我们应该对其进行处理：

    1. // 1 秒后中止
    2. let controller = new AbortController();
    3. setTimeout(() => controller.abort(), 1000);
    5. try {
    6.   let response = await fetch('/article/fetch-abort/demo/hang', {
    7.     signal: controller.signal
    8.   });
    9. } catch(err) {
    10.   if (err.name == 'AbortError') { // handle abort()
    11.     alert("Aborted!");
    12.   } else {
    13.     throw err;
    14.   }
    15. }

    AbortController 是可扩展的，它允许一次取消多个 fetch。

    例如，这里我们并行 fetch 多个 urls，然后 controller 将它们全部中止：

    1. let urls = [...]; // 要并行 fetch 的 url 列表
    3. let controller = new AbortController();
    5. let fetchJobs = urls.map(url => fetch(url, {
    6.   signal: controller.signal
    7. }));
    9. let results = await Promise.all(fetchJobs);
    11. // 如果 controller.abort() 被从其他地方调用，
    12. // 它将中止所有 fetch

    如果我们有自己的与 fetch 不同的异步任务，我们可以使用单个 AbortController 中止这些任务以及 fetch。

    我们只需要监听其 abort 事件：

    1. let urls = [...];
    2. let controller = new AbortController();
    4. let ourJob = new Promise((resolve, reject) => { // 我们的任务
    5.   ...
    6.   controller.signal.addEventListener('abort', reject);
    7. });
    9. let fetchJobs = urls.map(url => fetch(url, { // fetches
    10.   signal: controller.signal
    11. }));
    13. // 等待完成我们的任务和所有 fetch
    14. let results = await Promise.all([...fetchJobs, ourJob]);
    16. // 如果 controller.abort() 被从其他地方调用，
    17. // 它将中止所有 fetch 和 ourJob

    所以，AbortController 不仅适用于 fetch，它还是一个可以中止异步任务的通用对象，fetch 具有它的内建集成（译注：即 fetch 在内部集成了它）。