终止 Promise 队列的优雅方式：AbortController

2024-01-30 06:57:52

优雅地取消 Promise：掌握 AbortController

导言

异步编程是现代软件开发中不可或缺的一部分。Promise 是异步操作的基石，它们使我们能够在不阻塞主线程的情况下处理异步操作。然而，有时我们希望能够取消正在进行的 Promise。AbortController 提供了一种优雅的方法来实现这一点，本文将探讨如何使用它以及它带来的好处。

AbortController 的优点

AbortController 提供了以下优点：

控制权： 它使我们能够手动终止 Promise。
优雅的取消： 允许我们在不产生错误的情况下取消 Promise。
防止资源泄漏： 终止不再需要的 Promise 可以防止不必要的资源消耗。

如何使用 AbortController

使用 AbortController 有三个简单的步骤：

创建 AbortController： 使用 new AbortController() 创建一个 AbortController 实例。
获取 AbortSignal： 从 AbortController 中获取 AbortSignal 对象。
传递 AbortSignal： 将 AbortSignal 作为参数传递给 Promise 构造函数。

示例

以下代码示例展示了如何使用 AbortController 取消单个请求：

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

fetch('https://example.com/api/data', {
  signal
})
.then(response => {
  console.log(response);
})
.catch(error => {
  console.log(error);
});

// 稍后决定取消请求
controller.abort();

取消多个请求

AbortController 还允许取消多个请求。只需将相同的 AbortSignal 传递给所有 Promise 即可：

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

const promises = [];
for (let i = 0; i < 10; i++) {
  promises.push(
    fetch(`https://example.com/api/data/${i}`, {
      signal
    })
  );
}

// 稍后决定取消所有请求
controller.abort();

创建自定义的可取消 Promise

我们可以使用 AbortController 创建自己的可取消 Promise。以下是自定义可取消 Promise 的示例实现：

class CancelablePromise {
  constructor(executor) {
    this.controller = new AbortController();
    this.signal = this.controller.signal;
    
    this.promise = new Promise(executor);
  }
  
  cancel() {
    this.controller.abort();
  }
}

结论

AbortController 是一个强大的工具，它使我们能够优雅地取消 Promise。它提供了对异步操作的更多控制，防止资源泄漏，并为我们提供了一个更灵活的异步编程模型。通过拥抱 AbortController，我们可以解锁更健壮和可控的应用程序。

常见问题解答

AbortController 是如何工作的？
- AbortController 提供了一个 AbortSignal 对象，该对象可以指示 Promise 是否应终止。
AbortController 与 Promise.race() 有什么区别？
- AbortController 提供了更精细的控制，因为它允许我们手动终止 Promise，而 Promise.race() 仅允许我们等待最快的 Promise。
我可以在任何 Promise 上使用 AbortController 吗？
- 只有在 Promise 构造函数中传递了 AbortSignal 的 Promise 才能使用 AbortController。
AbortController 会引发错误吗？
- 当调用 controller.abort() 时，不会引发错误。Promise 将正常终止。
AbortController 可以防止超时错误吗？
- 是的，如果在 Promise 超时之前调用 controller.abort()，可以防止超时错误。