手写Promise取消功能实现详解

JavaScript原生Promise不支持取消，但通过轻量封装AbortController即可实现安全、兼容且不侵入原有逻辑的可取消Promise——本文提供了一个简洁实用的cancelablePromise工厂函数，它自动监听abort信号并拒绝Promise，完美支持fetch等原生API、链式调用和边界情况处理，既遵循Promise规范，又填补了关键能力空白，开箱即用，零依赖。

JavaScript 中原生的 Promise 并不支持取消（cancel），但可以通过封装 + AbortController 或自定义取消逻辑来实现“可取消的 Promise”。下面是一个轻量、实用、符合直觉的手写实现方案。

核心思路：用 AbortController 控制异步任务生命周期

现代浏览器和 Node.js（v15.4+）已原生支持 AbortController，它提供 abort() 方法和可监听的 signal。我们将它与 Promise 结合，在异步操作开始前绑定取消信号，一旦触发 abort，就拒绝 Promise 并清理资源。

• 不侵入原始 Promise 构造逻辑，保持语义清晰
• 兼容现有 Promise 链（.then/.catch/.finally）
• 自动处理重复调用 abort()、信号已中止等边界情况

手写 cancelablePromise 工厂函数

这是一个可复用的工具函数，接收一个执行器函数（类似 Promise 构造器），返回带 promise 和 abort 方法的对象：

function cancelablePromise(executor) {
  let abortController = new AbortController();
  
  const promise = new Promise((resolve, reject) => {
    const signal = abortController.signal;

    // 封装原始 executor，注入 signal 并捕获 abort
    try {
      executor(
        (value) => {
          if (!signal.aborted) resolve(value);
        },
        (reason) => {
          if (!signal.aborted) reject(reason);
        },
        signal // 显式传入 signal，便于用户主动检查或中止内部操作（如 fetch）
      );
    } catch (err) {
      if (!signal.aborted) reject(err);
    }

    // 监听 abort 事件，触发拒绝
    signal.addEventListener('abort', () => {
      reject(new Error('Promise was canceled'));
    }, { once: true });
  });

  return {
    promise,
    abort: () => abortController.abort(),
    signal: abortController.signal
  };
}

实际使用示例（含 fetch 场景）

✅ 正常使用：

const { promise, abort } = cancelablePromise((resolve, reject, signal) => {
  setTimeout(() => {
    if (!signal.aborted) resolve('done');
  }, 2000);
});

promise.then(console.log).catch(console.error);
// 1 秒后取消
setTimeout(abort, 1000); // 输出：Error: Promise was canceled

✅ 结合 fetch（天然支持 signal）：

const { promise, abort } = cancelablePromise((_, reject, signal) => {
  fetch('/api/data', { signal })
    .then(res => res.json())
    .then(data => console.log(data))
    .catch(err => {
      if (err.name === 'AbortError') {
        reject(new Error('Fetch was canceled'));
      } else {
        reject(err);
      }
    });
});

// 可随时调用 abort() 中断请求

注意事项与增强建议

⚠️ 当前实现适用于大多数场景，但需注意：

• executor 内部必须主动响应 signal（如传给 fetch、setTimeout 清理、轮询时检查 signal.aborted）
• 不支持取消已进入 fulfilled/rejected 状态的 Promise（这是设计使然，符合 Promise 规范）
• 如需更高级能力（如取消多个、超时自动 cancel、abort 后重试），可基于此封装 cancelablePromisePool 或 useCancelHook（React 场景）

这个实现简洁、标准、无依赖，既尊重 Promise 语义，又补足了关键缺失能力。不需要重写 Promise 类，也不破坏现有代码结构。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。