使用 AbortController 实现可取消的 Async/Await 操作-js教程-PHP中文网

使用 AbortController 实现可取消的 Async/Await 操作

心靈之曲

发布： 2025-10-08 11:36:18

原创

956人浏览过

使用 abortcontroller 实现可取消的 async/await 操作

在现代 JavaScript 开发中，async/await 已经成为处理异步操作的标准方式。然而，在某些场景下，我们需要能够取消正在进行的异步操作，例如用户主动取消请求、组件卸载等。虽然 Bluebird 提供了可取消的 Promise，但 ES6 内置的 AbortController 提供了一种更简洁、更通用的解决方案。

AbortController 的核心思想是创建一个信号 (signal)，将其传递给异步操作，并在需要取消时触发该信号。异步操作监听该信号，并在接收到取消信号时执行相应的清理工作。

使用 AbortController 的步骤：

创建 AbortController 实例：
```
const controller = new AbortController();
const signal = controller.signal;
```
登录后复制
AbortController 负责管理取消信号。controller.signal 返回一个 AbortSignal 对象，该对象可以传递给异步操作。
将 AbortSignal 传递给异步操作：
```
let myP = (sig) =>
  new Promise((resolve, reject) => {
    const tm = setTimeout(function () {
      console.log("before resolve");
      resolve("Success!"); // Yay! Everything went well!
    }, 2500);
    //sig.onabort = () => {
    sig.addEventListener('abort', () => {
      console.log('aborted');
      clearTimeout(tm);
      resolve(); // Or reject, depending on your logic
    });
  });
```
登录后复制
异步操作（这里是一个 Promise）通过 addEventListener('abort', callback) 监听 AbortSignal 的 abort 事件。当 abort 事件触发时，回调函数会被执行，可以在其中执行清理工作，例如取消定时器、关闭连接等。

注意： 在取消操作中，务必调用 resolve() 或 reject() 来结束 Promise，否则 async/await 会一直阻塞。通常情况下，建议调用 reject()，并传递一个错误信息，以便更好地处理取消事件。

PPT.CN,PPTCN,PPT.CN是什么,PPT.CN官网,PPT.CN如何使用
一键操作，智能生成专业级PPT

37

查看详情
触发取消信号：
```
setTimeout(() => controller.abort(), 1000);
```
登录后复制
当需要取消异步操作时，调用 controller.abort() 方法。这将触发 AbortSignal 的 abort 事件，并执行所有注册的回调函数。

完整示例：

let myP = (sig) =>
  new Promise((resolve, reject) => {
    const tm = setTimeout(function () {
      console.log("before resolve");
      resolve("Success!"); // Yay! Everything went well!
    }, 2500);
    //sig.onabort = () => {
    sig.addEventListener('abort', () => {
      console.log('aborted');
      clearTimeout(tm);
      resolve(); // Or reject, depending on your logic
    });
  });

const run = async () => {
  console.log("Start");

  const controller = new AbortController();
  const prm = myP(controller.signal);
  setTimeout(() => controller.abort(), 1000);

  await prm;
  console.log("After await prm");
};

run()
  .then(() => console.log("Finished"))
  .catch((e) => console.error(e));

登录后复制

注意事项：