返回

使用AbortController 中止 Promise 的终极指南

前端

使用 AbortController 和自定义解决方案中止 JavaScript Promise

简介

JavaScript 中的 Promise 是强大的工具,用于处理异步操作。它们提供了一种机制来处理完成或失败的异步操作,但如果没有中止它们的机制,可能会导致不必要的资源消耗和错误。

AbortController 是一个内置的 JavaScript API,可用于中止正在进行的异步操作,包括 Promise。它提供了一个 abort() 方法,可以立即终止操作。

使用 AbortController 中止 Promise

使用 AbortController 中止 Promise 非常简单。以下是步骤:

  1. 创建一个 AbortController 实例。
  2. 将 AbortController 实例传递给 Promise 构造函数。
  3. 当需要中止 Promise 时,调用 AbortController 实例的 abort() 方法。
const controller = new AbortController();
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Hello world!");
  }, 2000, { signal: controller.signal });
});

// 中止 Promise
controller.abort();

封装自己的 Promise 异步中止方案

除了 AbortController,我们还可以封装自己的 Promise 异步中止方案。这可以让我们在不使用 AbortController 的情况下中止 Promise。

以下是如何封装自己的 Promise 异步中止方案:

function createAbortPromise() {
  let abortController = null;
  let promise = null;

  const abort = () => {
    if (abortController) {
      abortController.abort();
    }
  };

  promise = new Promise((resolve, reject) => {
    abortController = new AbortController();
    setTimeout(() => {
      resolve("Hello world!");
    }, 2000, { signal: abortController.signal });
  });

  return { promise, abort };
}

比较 AbortController 和自定义解决方案

AbortController 是一种简单易用的解决方案,因为它是一个内置的 API。但是,它只适用于支持信号参数的异步操作。

自定义解决方案更加灵活,因为它适用于任何异步操作。但是,它需要更多的代码来实现,并且需要管理 AbortController 的生命周期。

何时使用 AbortController 和自定义解决方案

通常,建议使用 AbortController,因为它简单易用。但是,如果需要中止不受信号参数支持的异步操作,则需要使用自定义解决方案。

常见问题解答

1. AbortController 会抛出错误吗?

是的,AbortController 会抛出 AbortError,其消息为 "The operation was aborted."。

2. Promise 中止后会怎么样?

Promise 中止后将立即拒绝,并传递 AbortError

3. 是否可以重新启动中止的 Promise?

否,中止的 Promise 无法重新启动。

4. AbortController 是否支持所有异步操作?

否,AbortController 仅支持支持信号参数的异步操作。

5. AbortController 和 Promise.race() 有什么区别?

Promise.race() 允许中止 Promise,但它会中止所有参与的 Promise,而 AbortController 只会中止特定的 Promise。

结论

AbortController 和自定义 Promise 异步中止方案是强大的工具,可以让我们更好地控制异步操作。通过了解它们的用法和差异,我们可以根据我们的特定需求选择最佳解决方案,从而避免不必要的资源消耗和错误。