大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！

1. 通过 AbortController 提前终止 fetch

首先看一个例子，其使用 AbortController 来实现可以提前中止的 fetch：

fetchButton.onclick = async () => {
  const controller = new AbortController();
  // 添加取消按钮
  abortButton.onclick = () => controller.abort();
  try {
    const r = await fetch("/json", { signal: controller.signal});
    const json = await r.json();
    // 这里执行业务逻辑
  } catch (e) {
    const isUserAbort = e.name === "AbortError";
    // 如果是 AbortController 取消的则是 AbortError（一种 DOMException）
  }
};

上面示例展示了在 AbortController 出现之前不可能实现的事情，即主动取消网络请求。浏览器将提前终止 fetch，从而节省用户网络带宽。当然，提前终止也不必非要由用户手动发起。

上面示例中 controller.signal 返回的是 AbortSignal，其代表一个信号对象，其允许开发者与异步操作（例如 fetch 请求）进行通信，并在需要时通过 AbortController 对象中止。

如果开发者想从多个信号中中止，可以使用 AbortSignal.any() 组合成单个信号，比如下面的示例：

try {
  const controller = new AbortController();
  const timeoutSignal = AbortSignal.timeout(5000);
  const res = await fetch(url, {
    // This will abort the fetch when either signal is aborted
    signal: AbortSignal.any([controller.signal, timeoutSignal]),
  });
  const body = await res.json();
} catch (e) {
  if (e.name === "AbortError") {
    // Notify the user of abort.
  } else if (e.name === "TimeoutError") {
    // Notify the user of timeout
  } else {
    // A network error, or some other problem.
    console.log(`Type: ${e.name}, Message: ${e.message}`);
  }
}

AbortController 和 AbortSignal 两者用途还是有一定的区别：

AbortController：允许通过 controller.abort() 显式中止其附加的信号
AbortSignal ：不能直接中止，但开发者可以将其传递给 fetch() 之类的调用或直接监听其中止状态。

可以使用 signal.aborted 检查其状态，或为 abort 事件添加事件监听器，例如：fetch() 在内部执行此操作。

if (signal.aborted) {}
signal.addEventListener('abort', () => ());

AbortController 取消请求后服务器就不会继续处理该请求，也不会发送响应，从而避免了不必要的数据传输。同时，针对客户端来说会减少并发的连接数量，提高页面的响应性能。

2.AbortController 的典型使用场景

2.1 中止 WebSocket 等传统对象

很多老版本的 DOM API 其实并不支持 AbortSignal，例如：WebSocket，其只有一个 .close() 方法用于在请求完成后关闭连接。此时，开发者可以通过下面的方式显式取消请求：

function abortableSocket(url, signal) {
  const w = new WebSocket(url);

  if (signal.aborted) {
    w.close();
    // 已经取消，直接失败
  }
  signal.addEventListener("abort", () => w.close());
  return w;
}

请注意，如果已经中止，AbortSignal 不会触发其 “abort”，因此必须检查是否已经 aborted，在这种情况下立即 .close()。

2.2 移除事件处理程序

在通过 removeEventListener 移除 DOM 事件处理函数时，开发者必须保证第二个事件处理函数是同一个。

window.addEventListener('resize', () => doSomething());
// addEventListener 和 removeEventListener 非同一个函数
window.removeEventListener('resize', () => doSomething());

有了 AbortController 后，这一切变得非常简单，开发者只需要将 signal 传递给 addEventListener 的第三个参数即可。

const controller = new AbortController();
const {signal} = controller;
window.addEventListener("resize", () => doSomething(), { signal });
// 通过. abort() 方法移除事件处理函数
controller.abort();

当然，针对旧版本的浏览器可以尝试添加 Polyfill 以支持 AbortController。

2.3 React hooks 中的异步任务

在 React 中，如果 Effect 在再次触发之前没有完成，开发者一般不容易发现，此时 Effect 会并行运行。

function FooComponent({something}) {
  useEffect(async () => {
    const j = await fetch(url + something);
    // do something with J
  }, [something]);
  return <>...<>;
}

此时，开发者可以做的是创建一个 AbortController，每当下一个 useEffect 调用运行时就中止上一个请求：

function FooComponent({something}) {
  useEffect(() => {
    const controller = new AbortController();
    const {signal} = controller;
    const p = (async () => {
      // 真正执行的逻辑
      const j = await fetch(url + something, { signal});
      // 这里处理返回值
    })();
    return () => controller.abort();
  }, [something]);
  return <>...<>;
}

3.4 取消 setTimeout

Node.js 里新版的 setTimeout 可以用 AbortController 取消，例如下面的代码：

const {setTimeout: setTimeoutPromise} = require('node:timers/promises');

const ac = new AbortController();
const signal = ac.signal;
//  这里传入了 AbortSignal
setTimeoutPromise(1000, 'foobar', { signal})
  .then(console.log)
  .catch((err) => {
    if (err.name === 'AbortError')
      console.log('The timeout was aborted');
  });
ac.abort();

不过这个 Promise 版的 setTimeout 并不传入回调，回调需要在 .then() 里或者 await 后面自己调用。

但是，浏览器的 setTimeout 目前并不支持 AbortController，可能是原因是其已经设计了更先进的 scheduler.postTask() API，该方法用于根据优先级添加要执行的任务，因此 setTimeout 没理由增强了。

// Declare a TaskController with default priority
const abortTaskController = new TaskController();
// Post task passing the controller's signal
scheduler
  .postTask(() => console.log("Task executing"), {
    signal: abortTaskController.signal,
  })
  .then((taskResult) => console.log(`${taskResult}`)) //This won't run!
  .catch((error) => console.error("Error:", error)); // Log the error
// Abort the task
abortTaskController.abort();

值得一提的是， TaskController 是 AbortController 的子级，除了可以调用 abort() 取消 task，还可以通过 setPriority() 方法中途修改 task 的优先级，如果不需要控制优先级，则可以直接使用 AbortController。

参考资料

https://samthor.au/2022/abortcontroller-is-your-friend/

https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal

https://www.zhihu.com/question/545379005/answer/2593517694

https://nodejs.org/docs/v22.11.0/api/timers.html#timers-promises-api

https://developer.mozilla.org/en-US/docs/Web/API/Scheduler/postTask

https://www.youtube.com/watch?v=1GmCHKv5TSM

思凡资源网

为何说 AbortController 是前端一把利剑?