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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-10-08

浏览次数：次

返回列表

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

在现代 J*aScript 开发中，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()，并传递一个错误信息，以便更好地处理取消事件。
青泥AI
青泥学术AI写作辅助平台
360 查看详情
触发取消信号：
```
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));

注意事项：

AbortController 只能取消已经开始的异步操作。如果异步操作尚未开始，则无法取消。
在 abort 事件回调函数中，务必执行必要的清理工作，以避免资源泄漏。
可以使用同一个 AbortSignal 取消多个异步操作。这在需要同时取消多个相关操作时非常有用。
AbortController 不仅可以用于 fetch API，还可以用于任何支持 AbortSignal 的异步操作。

总结：

AbortController 提供了一种简单而强大的机制，用于取消 async/await 中的异步操作。通过创建、传递和触发取消信号，可以有效地管理异步流程，提高程序的健壮性和用户体验。在需要取消异步操作的场景下，AbortController 是一个值得考虑的选择。

以上就是使用 AbortController 实现可取消的 Async/Await 操作的详细内容，更多请关注其它相关文章！

# 如何用 # 太原小红书推广营销 # 浙江义乌网站建设网站 # 赣州seo公司到1火星 # 坡头区网站建设方案公示 # 喀什seo网站 # 张家界百度网站优化 # 网站优化公司商集客电话 # 成功的seo流动 # 自建网站推广的形式 # 网站关键词优化方法策略 # 有哪些 # 如何实现 # javascript # 如何使用 # 并在 # 可取消 # 多个 # 是一个 # 可以使用 # 回调 # ai # 回调函数 # java # es6

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：解决HTML Dialog中文件选择取消或重复选择导致Dialog关闭的问题

下一篇：如何用css实现三栏自适应布局

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们

新闻中心 NEWS CENTER

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