JavaScript AbortController：取消正在进行的异步操作

AbortController 是用于取消异步操作的工具，通过 signal 传递中止信号，调用 abort() 可终止 fetch 请求或自定义任务，避免资源浪费；每次操作应使用独立实例，需在 catch 中处理 AbortError，并在适当时机清理以防止内存泄漏。

在 JavaScript 中，AbortController 是一个用于取消异步操作的轻量级工具。它常用于终止正在进行的 fetch 请求，但也适用于其他可中断的任务，比如定时器或自定义 Promise 操作。通过它，开发者可以避免不必要的资源浪费和潜在的竞态条件。

什么是 AbortController？

AbortController 接口提供了一种方式来主动中止一个或多个 DOM 请求，例如 fetch 调用。每个 AbortController 实例都有一个 signal 属性，该信号可被传递给异步操作，以便监听是否触发了中止动作。

一旦调用控制器的 abort() 方法，其关联的 signal 就会触发，监听该信号的操作将收到通知并自行终止。

如何使用 AbortController 取消 fetch 请求

fetch API 原生支持 AbortSignal，是使用 AbortController 最常见的场景。

立即学习“Java免费学习笔记（深入）”；

调用 abort() 后，fetch 会以 AbortError 拒绝 Promise，可以在 catch 中识别并处理这种特殊情况。

在自定义异步任务中使用 AbortSignal

除了 fetch，你也可以在自己的异步逻辑中响应中止信号。比如处理长时间运行的任务或轮询操作。

function delayedTask(signal, delay) {

Boomy

AI音乐生成工具，创建生成音乐,与世界分享.

272

查看详情

return new Promise((resolve, reject) => {

if (signal.aborted) {

return reject(new Error('任务已被中止'));

}

const timer = setTimeout(() => {

console.log('任务完成');

resolve();

}, delay);

// 监听中止事件

signal.addEventListener('abort', () => {

clearTimeout(timer);

reject(new Error('任务被手动取消'));

});

});

}

// 使用示例

const controller = new AbortController();

delayedTask(controller.signal, 5000).catch(e => console.log(e.message));

// 取消任务

controller.abort();

这种方式让你对自定义异步流程拥有更好的控制力，尤其是在用户交互频繁、可能频繁切换状态的应用中非常有用。

注意事项与最佳实践

使用 AbortController 时注意以下几点：

• 每次需要独立控制一个操作时，应创建新的 AbortController 实例
• 中止后无法恢复，abort() 只能调用一次
• 务必在 catch 中检查 AbortError，避免误报错误
• 在组件卸载或生命周期结束时（如 React 的 useEffect 清理），及时调用 abort() 防止内存泄漏

基本上就这些。AbortController 虽小，但在管理异步操作生命周期方面非常强大，合理使用可以让应用更高效、响应更及时。

以上就是JavaScript AbortController：取消正在进行的异步操作的详细内容，更多请关注php中文网其它相关文章！