在现代前端开发中，Promise 和 async/await 已经成为处理异步操作的基石。然而，一个常见的棘手问题是：如何取消一个已经开始的 Promise？

比如，用户发起一个数据请求，但在请求完成前又导航到了其他页面；或者用户在一个搜索框中快速输入，我们需要取消前一次的搜索请求，只保留最后一次。在这些场景下，取消一个进行中的 Promise 就显得至关重要。

核心问题：为什么 Promise 本身不可取消？

首先，我们需要理解 Promise 的核心设计理念。一个 Promise 代表一个异步操作的最终结果。它的状态一旦从 pending（进行中）变为 fulfilled（已成功）或 rejected（已失败），就永远不会再改变。

Promise 本身不提供取消机制，原因如下：

1. 状态不可逆：这是 Promise 的核心规范。一旦状态改变，就形成了一个确定的、不可变的结果。
2. 单一责任：Promise 的职责是传递价值和状态，而不是控制异步操作本身的执行流程。发起异步操作的函数（如 fetch）才是执行者。

打个比方：你寄出了一封信（发起了一个 Promise），你不能在信件投递过程中把它神奇地从邮政系统里撤回来。你能做的，是在信件送达时（Promise 完成时），选择忽略它。

我们的目标，就是实现这种“忽略”机制，并尽可能地通知底层的异步操作停止工作，以节省资源。

AbortController

AbortController 是目前实现 Promise 取消的最佳实践和标准方案。它最初是为取消 fetch 请求而设计的，但其通用性使其可以与任何异步操作集成。

AbortController 的工作方式：

1. 创建一个 AbortController 实例。
2. controller.signal：这是一个 AbortSignal 对象，可以传递给需要支持取消的异步函数（如 fetch）。
3. controller.abort()：调用此方法来发出“中止”信号。
4. 当 abort() 被调用时，signal 会通知所有监听它的异步操作。对于 fetch 来说，它会自动中止网络请求并让 Promise reject 一个名为 AbortError 的错误。

1. 与 fetch配合使用

这是 AbortController 最常见的用法。

// 创建一个控制器
const controller = new AbortController();
const signal = controller.signal;

console.log("开始请求数据...");

fetch('https://api.example.com/data', { signal })
  .then(response => response.json())
  .then(data => {
    console.log("数据获取成功:", data);
  })
  .catch(err => {
    // 检查错误是否是由于中止操作引起的
    if (err.name === 'AbortError') {
      console.log('Fetch 请求已被用户中止。');
    } else {
      console.error('Fetch 错误:', err);
    }
  });

// 比如，在 500 毫秒后用户决定取消请求
setTimeout(() => {
  console.log("正在中止请求...");
  controller.abort();
}, 500);

在 async/await 语法中同样清晰：

async function fetchData() {
  const controller = new AbortController();
  const signal = controller.signal;

  // 如果 3 秒内用户点击了取消按钮，就中止请求
  const cancelButton = document.getElementById('cancel-btn');
  cancelButton.onclick = () => controller.abort();

  try {
    const response = await fetch('...', { signal });
    const data = await response.json();
    console.log(data);
  } catch (err) {
    if (err.name === 'AbortError') {
      console.log('请求已取消');
    } else {
      console.error('请求失败', err);
    }
  }
}

2. 在自定义 Promise 中使用 AbortController

你也可以让你自己的异步函数支持 AbortSignal。

原理：

• 你的函数需要接收 signal 作为参数。
• 在异步操作的关键节点，检查 signal.aborted 属性。如果为 true，则提前退出。
• 使用 signal.addEventListener('abort', ...) 来注册清理逻辑（如清除定时器）。

function longRunningTask(signal) {
  return new Promise((resolve, reject) => {
    // 如果信号在任务开始前就已经被中止，则直接拒绝
    if (signal.aborted) {
      return reject(new DOMException('任务已中止', 'AbortError'));
    }

    console.log("耗时任务开始...");

    const timeoutId = setTimeout(() => {
      console.log("耗时任务完成！");
      resolve("成功！");
    }, 5000);

    // 监听 abort 事件，用于清理工作
    signal.addEventListener('abort', () => {
      clearTimeout(timeoutId); // 清除定时器，真正中止了操作
      console.log("定时器已被清除，任务已中止。");
      reject(new DOMException('任务已中止', 'AbortError'));
    });
  });
}

// --- 使用示例 ---
const controller = new AbortController();

longRunningTask(controller.signal)
  .then(console.log)
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('捕获到 AbortError，任务被成功取消。');
    }
  });

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

优点：

• 官方标准：是 W3C 和 WHATWG 定义的标准 API。
• 真正中止底层操作：fetch 会中止网络连接，自定义函数也可以通过它来清理资源（如清除定时器），避免了不必要的浪费。
• 语义清晰：通过专门的 AbortError 来区分“取消”和“其他错误”，代码更健壮。
• 组合性强：一个 AbortSignal 可以传递给多个 Promise，实现批量取消。

虽然 Promise 本身的核心设计使其不可变，但通过 AbortController 这一强大的模式，我们已经可以非常有效地控制和终止异步流程，编写出更健壮、更高效的应用程序。