JavaScript 如何取消一个进行中的 Promise

JavaScript 如何取消一个进行中的 Promise？深入解析与实践

Promise 已经成为 JavaScript 异步编程的核心，它极大地简化了回调地狱，让异步代码更易于阅读和维护。然而，Promise 本身设计之初并没有提供直接的“取消”机制。这意味着一旦一个 Promise 开始执行，它就会一直运行直到成功（fulfilled）或失败（rejected）。在很多实际应用场景中，例如用户快速切换页面、网络请求超时或不再需要某个计算结果时，我们往往需要中断或取消一个正在进行中的 Promise，以避免资源浪费和不必要的副作用。

那么，在 JavaScript 中，我们究竟该如何优雅地取消一个已经开始的 Promise 呢？

Promise 的“不可取消性”：为何如此？

Promise 的设计理念是专注于单一状态的最终确定性。一个 Promise 要么是待定（pending）、要么是已解决（fulfilled）、要么是已拒绝（rejected），并且一旦状态确定就不可逆转。这种设计带来了代码的可预测性和简化了错误处理，但也正是这种特性，使得它不像传统的事件监听器那样可以直接移除或停止。

直接修改 Promise 内部状态来“取消”它，会破坏其核心设计原则，并可能导致难以追踪的副作用。因此，JavaScript 社区并没有为 Promise 添加一个原生的 cancel() 方法。

曲线救国：实现 Promise 取消的几种模式

虽然 Promise 没有内置的取消机制，但我们可以通过一些模式和工具来模拟或实现类似“取消”的效果。

1. 使用 AbortController（推荐）

AbortController 是 Web 标准中引入的一个接口，旨在提供一个用于取消 DOM 请求的信号机制，但它也可以非常优雅地应用于其他异步操作，包括 Promise。

工作原理：AbortController 对象包含一个 signal 属性。你可以将这个 signal 传递给支持它的异步 API（例如 fetch()）。当 AbortController 实例的 abort() 方法被调用时，signal 会触发一个 abort 事件。监听这个事件的异步操作可以检测到取消信号并中断其执行。

代码示例：

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

function fetchDataWithTimeout(url, timeout) {
  return new Promise((resolve, reject) => {
    // 设置超时定时器，如果超时则取消请求
    const timeoutId = setTimeout(() => {
      controller.abort(); // 调用 abort 方法，触发取消信号
      reject(new Error('Request timed out'));
    }, timeout);

    fetch(url, { signal }) // 将 signal 传递给 fetch
      .then(response => {
        clearTimeout(timeoutId); // 请求成功，清除超时定时器
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
      })
      .then(data => resolve(data))
      .catch(error => {
        clearTimeout(timeoutId); // 发生错误，清除超时定时器
        if (error.name === 'AbortError') {
          console.log('Fetch aborted!');
          // 可以选择不 reject，或者 reject一个特定的取消错误
          // reject(new Error('Operation cancelled'));
        } else {
          reject(error);
        }
      });
  });
}

// 示例用法
const url = 'https://api.example.com/data'; // 替换为你的 API 地址
const promise = fetchDataWithTimeout(url, 3000); // 3秒超时

promise
  .then(data => console.log('Data fetched:', data))
  .catch(error => console.error('Error:', error.message));

// 假设在某个时刻，我们决定取消这个请求
setTimeout(() => {
  if (controller && !signal.aborted) { // 检查是否已取消，避免重复取消
    controller.abort();
    console.log('Manually aborted the fetch operation.');
  }
}, 1000); // 在1秒后手动取消

优点：

标准且通用：它是 Web 标准的一部分，并且许多新的 Web API（如 fetch、WebSockets）都支持 AbortSignal。
清晰的取消语义：通过 AbortError 可以明确区分是取消引起的错误还是其他类型的错误。
解耦：取消逻辑与 Promise 本身解耦，更易于管理。

缺点：

非侵入式：对于不支持 AbortSignal 的第三方库或自定义 Promise，你需要手动添加监听和取消逻辑。

2. 竞争 Promise（Race Promise）

这种方法不是真正意义上的“取消” Promise，而是通过让一个“取消”Promise 与你的目标 Promise 进行竞争，当“取消”Promise 先解决或拒绝时，就相当于目标 Promise 被“放弃”了。

工作原理：结合 Promise.race() 方法，创建一个 Promise，它在需要取消时立即拒绝。

代码示例：

function cancellablePromise(promise) {
  let hasCanceled = false;

  const wrappedPromise = new Promise((resolve, reject) => {
    promise.then(
      val => (hasCanceled ? reject({ isCanceled: true }) : resolve(val)),
      err => (hasCanceled ? reject({ isCanceled: true }) : reject(err))
    );
  });

  return {
    promise: wrappedPromise,
    cancel() {
      hasCanceled = true;
    },
  };
}

// 示例用法
const someLongRunningPromise = new Promise(resolve => {
  setTimeout(() => {
    console.log('Long running promise finished!');
    resolve('Done!');
  }, 5000);
});

const { promise: myCancellablePromise, cancel } = cancellablePromise(someLongRunningPromise);

myCancellablePromise
  .then(result => console.log(result))
  .catch(error => {
    if (error && error.isCanceled) {
      console.log('Promise was cancelled!');
    } else {
      console.error('Promise failed:', error);
    }
  });

// 1秒后取消这个 Promise
setTimeout(() => {
  console.log('Attempting to cancel...');
  cancel();
}, 1000);

优点：

纯 JavaScript 实现：不需要依赖任何 Web API 或外部库。
相对简单：实现逻辑直观。

缺点：

并非真正的取消：原始的 someLongRunningPromise 仍然会在后台继续执行，即使它的结果被忽略了。这可能导致资源浪费（例如，网络请求仍然会完成）。
侵入性：需要对每个要“取消”的 Promise 进行包装。

3. 手动管理状态（适用于自定义 Promise）

如果你是 Promise 的创建者，你可以设计一个机制，让 Promise 内部能够响应外部的取消信号。

代码示例：

function createCancellableOperation() {
  let isCancelled = false;

  const promise = new Promise((resolve, reject) => {
    let timerId;

    // 模拟一个耗时操作
    timerId = setTimeout(() => {
      if (isCancelled) {
        console.log('Operation was cancelled before completion.');
        reject(new Error('Operation Cancelled'));
      } else {
        console.log('Operation completed!');
        resolve('Result from operation');
      }
    }, 3000);

    // 暴露一个取消方法
    this.cancel = () => {
      isCancelled = true;
      clearTimeout(timerId); // 清除定时器，停止后续操作
      console.log('Cancelling operation...');
      reject(new Error('Operation Cancelled')); // 也可以选择不 reject，只停止内部逻辑
    };
  });

  return { promise, cancel: this.cancel };
}

// 示例用法
const { promise: opPromise, cancel: opCancel } = createCancellableOperation();

opPromise
  .then(result => console.log(result))
  .catch(error => console.error('Error:', error.message));

// 1秒后取消操作
setTimeout(() => {
  opCancel();
}, 1000);

优点：

真正的取消：可以在 Promise 内部停止不必要的计算或副作用。
高度定制化：可以根据具体需求实现复杂的取消逻辑。

缺点：

侵入性强：需要修改 Promise 的实现代码。
不适用于外部 Promise：无法用于已经存在的第三方 Promise。

选择哪种方式？

对于网络请求或支持 AbortSignal 的 Web API：强烈推荐使用 AbortController。它是最标准、最优雅的解决方案。
对于自定义的、内部可以控制逻辑的异步操作：考虑手动管理状态，可以在 Promise 内部进行真正的资源清理。
当无法使用 AbortController 且不希望修改原始 Promise 时：可以考虑竞争 Promise 模式，但要注意它并非真正的取消，只是忽略结果。

尽管 JavaScript 的 Promise 没有内置的 cancel() 方法，但通过巧妙地运用 AbortController 或其他模式，我们依然可以有效地实现对异步操作的控制。理解每种方法的优缺点，并根据您的具体应用场景选择最合适的策略，将使您的异步代码更加健壮和高效。在现代 Web 开发中，AbortController 无疑是处理 Promise 取消的首选利器。