JavaScript Promise 中怎么使用 AbortController 取消正在进行的任务-js教程-PHP中文网

promise本身不支持取消，但可通过abortcontroller实现对fetch等异步操作的中止；关键在于让异步源响应signal信号并主动reject，而非取消promise本身。

javascript promise 中怎么使用 abortcontroller 取消正在进行的任务

Promise 本身不支持取消，但结合 AbortController 可以实现对异步操作（如 fetch）的主动中止。关键在于：不是“取消 Promise”，而是让 Promise 内部的异步源（如网络请求）响应中断信号并提前拒绝。

AbortController 如何与 Promise 配合工作

AbortController 提供一个 signal 对象，它是一个可监听的中断信号。当调用 controller.abort() 时，signal.aborted 变为 true，且触发 abort 事件。原生支持 AbortSignal 的 API（如 fetch）会自动响应这个信号并 reject；自定义 Promise 则需手动检查 signal.aborted 并提前 throw 错误。

在 fetch 请求中直接使用 signal

这是最常见、最简洁的用法。fetch 原生支持 signal 选项：

创建 const controller = new AbortController()
将 controller.signal 传入 fetch(url, { signal })
调用 controller.abort() 即可中止请求，此时 fetch 返回的 Promise 会以 AbortError 拒绝

示例：

js2java

JavaScript 到 Java 全栈翻译助手，专为前端开发者学习 Java 或快速实现后端业务逻辑而设计。当用户提到以下场景时必须使用此技能： - "帮我把这段 JS 代码转成 Java" - "用 Java 怎么写这个逻辑" - "我习惯用 JS 写，想翻译成 Java" - "教我 Java，我要写后端接...

下载

const controller = new AbortController();
fetch('/api/data', { signal: controller.signal })
  .then(res => res.json())
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('请求已被取消');
    } else {
      console.error('其他错误:', err);
    }
  });

// 3 秒后取消（模拟用户取消）
setTimeout(() => controller.abort(), 3000);

封装支持取消的自定义 Promise

对于不原生支持 AbortSignal 的异步逻辑（比如定时器、WebSocket 连接、或复杂计算），需手动监听 signal 并提前退出：

在 Promise 内部监听 signal.onabort 或轮询 signal.aborted
一旦检测到中断，立即 reject(new DOMException('Aborted', 'AbortError'))
注意清理副作用（如清除定时器、关闭连接）

示例（模拟带取消的延时任务）：

function delay(ms, signal) {
  return new Promise((resolve, reject) => {
    // 立即检查是否已中止
    if (signal.aborted) {
      return reject(new DOMException('Aborted', 'AbortError'));
    }

    const timeoutId = setTimeout(() => resolve(), ms);

    // 监听中止事件
    signal.addEventListener('abort', () => {
      clearTimeout(timeoutId);
      reject(new DOMException('Aborted', 'AbortError'));
    }, { once: true });
  });
}

// 使用
const controller = new AbortController();
delay(5000, controller.signal)
  .then(() => console.log('完成'))
  .catch(err => {
    if (err.name === 'AbortError') console.log('被取消了');
  });

setTimeout(() => controller.abort(), 2000); // 2 秒后取消