阐述 JavaScript 中 AbortController 和 AbortSignal 在复杂异步操作链中实现优雅取消的原理和最佳实践。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷，大家好！今天咱们聊聊 JavaScript 里一对好基友：AbortController 和 AbortSignal。这俩哥们儿，专治各种“异步操作太长，我想取消”的疑难杂症。

想象一下，你点了份外卖，结果等了半小时还没到，你想取消订单，这就是异步操作取消的场景。在前端世界里，我们经常发起 HTTP 请求、执行定时任务、或者进行复杂的动画，这些都是异步操作。如果用户改变主意了，或者组件被卸载了，我们就需要一种优雅的方式来取消这些操作，而不是让它们继续执行，浪费资源，甚至引发 Bug。

AbortController 和 AbortSignal 正是为此而生的。它们提供了一种标准化的、可控的方式来取消异步操作。

AbortController：取消控制中心

AbortController 就像一个取消订单的按钮。它只有一个主要方法：abort()。调用 abort() 方法会触发与之关联的 AbortSignal，告诉所有监听该信号的异步操作： "兄弟们，撤退！"

AbortSignal：取消信号接收器

AbortSignal 就像一个订单状态指示灯。它有一个 aborted 属性，表示是否已经取消。还有一个 addEventListener 方法，可以监听 abort 事件，以便在取消时执行相应的清理工作。

工作原理：一唱一和，取消异步操作

创建 AbortController： 首先，我们需要创建一个 AbortController 实例。
获取 AbortSignal： 从 AbortController 实例中获取 AbortSignal 对象。
传递 AbortSignal： 将 AbortSignal 传递给需要取消的异步操作。
监听 abort 事件： 在异步操作中，监听 AbortSignal 的 abort 事件。
调用 abort()： 当需要取消操作时，调用 AbortController 的 abort() 方法。
清理工作： 在 abort 事件处理程序中，执行相应的清理工作，例如停止请求、清除定时器等。

代码示例：取消一个 fetch 请求

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

fetch('https://api.example.com/data', { signal })
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log('Data received:', data);
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Fetch aborted');
    } else {
      console.error('Fetch error:', error);
    }
  });

// 假设 5 秒后取消请求
setTimeout(() => {
  controller.abort();
  console.log('Request aborted after 5 seconds');
}, 5000);

在这个例子中，我们创建了一个 AbortController 和一个 AbortSignal。我们将 signal 对象传递给 fetch 函数的配置对象。fetch 函数会监听 signal 的 abort 事件。如果 abort() 方法被调用，fetch 函数会抛出一个 AbortError。我们在 catch 块中捕获这个错误，并进行相应的处理。

5秒后，我们调用 controller.abort() 方法，取消 fetch 请求。控制台会输出 "Fetch aborted" 和 "Request aborted after 5 seconds"。

最佳实践：优雅地取消异步操作

尽早创建 AbortController： 在发起异步操作之前就创建 AbortController，这样可以确保在需要取消时，能够及时地取消操作。
传递 AbortSignal 给所有相关的异步操作： 如果有多个异步操作相互依赖，都需要取消，那么需要将同一个 AbortSignal 传递给所有这些操作。
在 abort 事件处理程序中执行清理工作： 在 abort 事件处理程序中，需要执行所有必要的清理工作，例如停止请求、清除定时器、释放资源等。
处理 AbortError： 在 catch 块中，需要检查错误是否是 AbortError，如果是，则说明操作是被取消的，需要进行相应的处理。
避免在 abort 事件处理程序中发起新的异步操作： 在 abort 事件处理程序中发起新的异步操作可能会导致死循环或者其他问题，应该避免这样做。
考虑使用 finally 块： finally 块可以确保在操作完成或者被取消时，都会执行清理工作。
封装取消逻辑： 可以将取消逻辑封装成一个函数或者类，方便在多个地方重用。

高级用法：取消链式异步操作

有时候，我们需要取消一个链式的异步操作，例如：

async function fetchData() {
  const response1 = await fetch('https://api.example.com/data1');
  const data1 = await response1.json();
  const response2 = await fetch(`https://api.example.com/data2?id=${data1.id}`);
  const data2 = await response2.json();
  return data2;
}

要取消这个链式操作，我们需要将 AbortSignal 传递给每一个 fetch 调用：

async function fetchData(signal) {
  try {
    const response1 = await fetch('https://api.example.com/data1', { signal });
    const data1 = await response1.json();
    const response2 = await fetch(`https://api.example.com/data2?id=${data1.id}`, { signal });
    const data2 = await response2.json();
    return data2;
  } catch (error) {
    if (error.name === 'AbortError') {
      console.log('Fetch aborted');
    } else {
      console.error('Fetch error:', error);
    }
    throw error; // 重新抛出错误，让调用者知道操作被取消了
  }
}

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

fetchData(signal)
  .then(data => {
    console.log('Data received:', data);
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Operation aborted');
    } else {
      console.error('Operation error:', error);
    }
  });

setTimeout(() => {
  controller.abort();
  console.log('Operation aborted after 5 seconds');
}, 5000);

在这个例子中，我们将 signal 对象传递给 fetchData 函数，然后在每一个 fetch 调用中都使用了它。如果 abort() 方法被调用，所有的 fetch 调用都会抛出一个 AbortError，fetchData 函数会捕获这个错误，并重新抛出它，让调用者知道操作被取消了。

表格总结：AbortController 和 AbortSignal 的属性和方法

对象	属性/方法	描述
`AbortController`	`signal`	返回一个关联的 `AbortSignal` 对象。
`AbortController`	`abort()`	调用此方法会触发关联的 `AbortSignal`，使其 `aborted` 属性变为 `true`，并触发 `abort` 事件。可以传递一个可选的 `reason` 参数，该参数将作为 `AbortSignal.reason` 属性的值。
`AbortSignal`	`aborted`	一个只读的布尔值，表示 `AbortSignal` 是否已经被触发（即 `AbortController.abort()` 是否已经被调用）。
`AbortSignal`	`reason`	一个只读的属性，返回一个表示取消原因的值。如果 `AbortController.abort()` 被调用时传递了一个 `reason` 参数，则该属性的值将是该参数的值；否则，该属性的值将是 `undefined`。
`AbortSignal`	`addEventListener()`	用于监听 `abort` 事件。当 `AbortController.abort()` 被调用时，会触发 `abort` 事件。你可以使用此方法注册一个回调函数，该函数将在 `abort` 事件发生时执行。
`AbortSignal`	`removeEventListener()`	用于移除 `abort` 事件的监听器。
`AbortSignal`	`throwIfAborted()`	一个方法，如果 `AbortSignal` 已经中止（`aborted` 为 `true`），则抛出一个错误。这个方法可以用来在异步操作开始之前或者在关键步骤中检查信号是否已经中止，从而避免不必要的计算或者资源消耗。如果 `aborted` 为 `false`，则该方法不执行任何操作。抛出的错误是 `AbortError` 的一个实例，或者如果是使用 `AbortController.abort()` 方法设置的 `reason`，则抛出该 `reason`。

常见问题解答 (FAQ)

AbortController 和 Promise 的 cancel() 方法有什么区别？

Promise 的 cancel() 方法是一个非标准的、已经废弃的方法。AbortController 和 AbortSignal 提供了一种标准化的、更可靠的方式来取消异步操作。
可以同时使用多个 AbortSignal 吗？

不可以。一个异步操作只能监听一个 AbortSignal。但是，你可以使用 Promise.race() 或者其他方法来组合多个 AbortSignal，以便在任何一个信号触发时都取消操作。
AbortController 会自动取消所有相关的异步操作吗？

不会。AbortController 只是发出一个取消信号。异步操作需要自己监听这个信号，并进行相应的处理。
AbortSignal 的 reason 属性有什么用？

reason 属性可以用来提供关于取消原因的更多信息。例如，你可以使用 reason 属性来区分用户取消和超时取消。

总结

AbortController 和 AbortSignal 是 JavaScript 中用于取消异步操作的强大工具。通过合理地使用它们，我们可以编写出更健壮、更可靠的代码。记住，取消异步操作的关键在于尽早创建 AbortController，将 AbortSignal 传递给所有相关的异步操作，并在 abort 事件处理程序中执行清理工作。

希望今天的讲座对大家有所帮助！下次再见！

发表回复 取消回复

发表回复取消回复