如何取消一个已经开始的 Promise

在现代前端开发中，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 这一强大的模式，我们已经可以非常有效地控制和终止异步流程，编写出更健壮、更高效的应用程序。

以上关于如何取消一个已经开始的 Promise的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。