优雅终结：Fetch 和异步任务

2023-09-09 21:28:34

自引入了 Promise 以来，编写异步任务变得轻而易举。我们摆脱了层层嵌套的回调函数的束缚。Promise 提供的统一接口让我们能够更轻松地管理和控制异步任务。

然而，Promise 并非完美，也存在一定的局限性。

首先，Promise 是一种基于回调的机制。这意味着它依赖于事件循环来执行操作。当一个异步操作完成后，它会将一个回调函数推送到事件循环中。事件循环在主线程中运行，因此当事件循环繁忙时，回调函数可能会被延迟执行。这可能会导致性能问题，特别是当有多个异步操作同时执行时。

其次，Promise 无法被取消。一旦创建一个 Promise，它就会一直执行，直到完成或被拒绝。这意味着如果我们启动了一个异步操作，但中途改变主意，无法停止操作。这在某些情况下可能是一个问题，例如当我们发起网络请求时。

为了解决这些问题，人们提出了几种替代 Promise 的方法，其中包括 Fetch 和异步任务。

Fetch 是一个浏览器 API，允许我们以更简单、更强大的方式发送网络请求。Fetch 返回一个 Promise，但它还提供了一些额外的功能，例如能够中止请求。这使得我们可以解决 Promise 无法被取消的限制。

异步任务是 JavaScript 中的一种机制，允许我们在后台执行长时间运行的任务，而不会阻塞主线程。异步任务返回一个 Promise，但它还提供了一些额外的功能，例如能够轮询任务的状态和取消任务。这使得我们可以解决 Promise 在繁忙的事件循环中性能不佳的问题。

在本文中，我们将探讨如何使用 Fetch 和异步任务优雅地终止异步任务。

使用 Fetch 中止请求

Fetch API 提供了一个 abort() 方法，允许我们中止网络请求。这在某些情况下可能非常有用，例如当我们发起网络请求但中途改变主意时。

要使用 abort() 方法，我们需要在创建 Fetch 请求时指定一个信号对象。信号对象是一个包含 abort() 方法的对象。当我们调用 abort() 方法时，它会将 abort 信号发送给 Fetch 请求。这将导致请求被中止。

以下是如何使用 Fetch 中止请求的示例：

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

fetch('https://example.com/api/v1/users', {
  signal
})
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      // 请求已中止
    } else {
      // 发生其他错误
    }
  });

// 中止请求
controller.abort();

使用异步任务取消任务

异步任务提供了一个 cancel() 方法，允许我们取消任务。这在某些情况下可能非常有用，例如当我们启动长时间运行的任务但中途改变主意时。

要使用 cancel() 方法，我们需要在创建异步任务时指定一个信号对象。信号对象是一个包含 abort() 方法的对象。当我们调用 abort() 方法时，它会将 abort 信号发送给异步任务。这将导致任务被取消。

以下是如何使用异步任务取消任务的示例：

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

const task = setTimeout(() => {
  // 执行任务
}, 1000, signal);

// 取消任务
controller.abort();