Promise无法中断？教你三招优雅实现异步任务取消

Promise 为什么不能中断？

Promise 的设计初衷是"一旦开始，无法停止"。一旦你 new 了一个 Promise，里面的异步任务就会执行到底。Promise 只负责"通知"你结果（resolve/reject），但无法控制任务本身的生命周期。

举个例子：

javascript 复制代码

const p = new Promise((resolve) => {
  setTimeout(() => resolve('done'), 5000);
});

你无法通过 p 让 setTimeout 提前终止。

这就导致了很多实际开发中的"异步幽灵"问题。

三大实用中断方案

1. 标准方案：用 AbortController 说拜拜

自从 fetch API 推出后，浏览器和 Node.js 都支持了 AbortController。它专门用来"中断"异步操作，尤其适合网络请求。

示例代码：

javascript 复制代码

const controller = new AbortController();
const signal = controller.signal;

fetch('https://api.example.com/data', { signal })
  .then(res => res.json())
  .then(data => console.log('数据：', data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('请求被中断！');
    } else {
      console.error('请求失败：', err);
    }
  });

// 需要中断时
controller.abort();

优点：

原生支持，语义清晰
适用于 fetch、部分第三方库

缺点：

只能用于支持 signal 的 API

2. 自定义可取消 Promise，拒绝"异步幽灵"

如果你的异步操作不支持 AbortController，可以自定义一个"可取消 Promise"：

javascript 复制代码

function cancellablePromise(executor) {
  let cancel;
  const p = new Promise((resolve, reject) => {
    cancel = () => reject(new Error('Promise cancelled'));
    executor(resolve, reject);
  });
  p.cancel = cancel;
  return p;
}

// 用法
const p = cancellablePromise((resolve) => {
  setTimeout(() => resolve('done'), 5000);
});

p.then(console.log).catch(console.error);

// 需要中断时
p.cancel();

注意：

这种方式只是让 Promise 进入 rejected 状态，无法真正终止 setTimeout 或其他异步操作 。

但在大多数 UI 场景下，已经足够避免"异步幽灵"带来的副作用。

3. 信号量方案：让异步任务"自觉"终止

如果你能控制异步任务的实现，可以传递一个"信号对象"，让任务在合适时机主动检查是否需要中断。

javascript 复制代码

function doAsyncTask(signal) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (signal.aborted) {
        reject(new Error('任务被中断'));
      } else {
        resolve('任务完成');
      }
    }, 5000);
  });
}

const signal = { aborted: false };
const p = doAsyncTask(signal);

p.then(console.log).catch(console.error);

// 需要中断时
signal.aborted = true;

优点：

灵活，适合自定义异步任务
可扩展性强

缺点：

需要异步任务"自觉"检查信号

实战建议

网络请求：优先用 AbortController，原生支持，最优雅。
自定义异步任务：用信号量或自定义 cancel 方法，保证任务可控。
UI 场景：即使无法真正中断，也要保证 Promise 状态可控，避免"异步幽灵"影响用户体验。

总结

如果你觉得这篇文章有用，欢迎点赞、收藏、转发，让更多前端小伙伴少踩坑！