JS `AbortController` 与 `AbortSignal`：统一取消异步操作

各位观众老爷们，大家好！我是你们的老朋友，今天咱们来聊聊 JavaScript 里一对好基友：AbortController 和 AbortSignal。 这俩哥们儿，专门负责取消异步操作，让你的代码更优雅，更可控。

开场：异步操作的烦恼

在 JavaScript 的世界里，异步操作简直是家常便饭。 比如，从服务器请求数据，处理用户输入，执行定时任务等等。 这些操作往往需要一段时间才能完成，而且，有时候我们可能需要提前取消它们。

想想看，你发起了个网络请求，结果用户手抖点了一下取消按钮，或者页面已经跳转了，你还在傻乎乎地等着服务器返回数据，这多浪费资源啊！

更糟糕的是，如果你的代码没有妥善处理取消的情况，可能还会导致一些奇怪的 bug，比如内存泄漏，或者页面崩溃。

AbortController 和 AbortSignal 闪亮登场

为了解决这些问题，JavaScript 引入了 AbortController 和 AbortSignal 这两个 API。

• AbortController: 就像一个遥控器，用来控制异步操作的取消。 你可以通过它创建一个 AbortSignal 对象，然后把这个 AbortSignal 传递给你的异步操作。
• AbortSignal: 就像一个开关，用来告诉异步操作是否需要取消。 异步操作会监听这个 AbortSignal 的状态，一旦 AbortSignal 被设置为取消状态，异步操作就会停止执行。

简单示例：取消 fetch 请求

咱们先来看一个最常见的例子：取消 fetch 请求。

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

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

// 在某个时刻，取消请求
setTimeout(() => {
  controller.abort();
}, 5000); // 5秒后取消请求

在这个例子中，我们首先创建了一个 AbortController 对象，然后通过 controller.signal 获取了一个 AbortSignal 对象。

接着，我们将 signal 对象传递给 fetch 函数的 options 参数。

fetch 函数会监听 signal 的状态。 如果 signal 被设置为取消状态，fetch 函数就会抛出一个 AbortError 异常。

在 catch 块中，我们可以判断 error.name 是否为 AbortError，如果是，就说明请求被取消了。

最后，我们使用 setTimeout 函数在 5 秒后调用 controller.abort() 方法，取消请求。

AbortController 和 AbortSignal 的原理

其实，AbortController 和 AbortSignal 的原理非常简单。

• AbortController 内部维护着一个 AbortSignal 对象。
• AbortSignal 对象有一个 aborted 属性，表示是否被取消。
• AbortController.abort() 方法会将 AbortSignal 对象的 aborted 属性设置为 true。
• 异步操作会监听 AbortSignal 对象的 aborted 属性，一旦该属性变为 true，异步操作就会停止执行。

更详细的介绍

下面，咱们来更详细地介绍一下 AbortController 和 AbortSignal 的各个属性和方法。

AbortController

属性/方法	描述
AbortController()	构造函数，创建一个 AbortController 对象。
signal	只读属性，返回一个与 AbortController 关联的 AbortSignal 对象。
abort(reason?)	方法，取消与 AbortController 关联的异步操作。 可以传递一个 reason 参数，表示取消的原因。 这个 reason 会被传递给 AbortSignal 对象的 reason 属性。

AbortSignal

属性/方法	描述
aborted	只读属性，返回一个布尔值，表示 AbortSignal 是否被取消。 如果被取消，返回 true，否则返回 false。
reason	只读属性，返回一个值，表示取消的原因。 只有在 aborted 属性为 true 时，该属性才有效。 如果没有指定取消原因，则返回 undefined。
onabort	事件处理程序属性，用于指定当 AbortSignal 被取消时要执行的函数。
throwIfAborted()	方法，如果 AbortSignal 已经被取消，则抛出一个 AbortError 异常。 这个方法可以用来在异步操作开始之前检查 AbortSignal 的状态，如果已经被取消，则直接抛出异常，避免执行不必要的代码。
addEventListener()	方法，允许你监听 abort 事件。 当 AbortSignal 被取消时，会触发 abort 事件。 例如：signal.addEventListener('abort', () => { console.log('Abort signal received!'); });
removeEventListener()	方法，移除之前添加的 abort 事件监听器。

使用 AbortSignal 取消其他异步操作

除了 fetch 请求，AbortSignal 还可以用来取消其他类型的异步操作，比如 setTimeout，XMLHttpRequest，甚至是你自己编写的异步函数。

示例1：取消 setTimeout

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

const timeoutId = setTimeout(() => {
  console.log('Timeout completed');
}, 5000);

signal.addEventListener('abort', () => {
  clearTimeout(timeoutId);
  console.log('Timeout aborted');
});

// 在某个时刻，取消 timeout
setTimeout(() => {
  controller.abort();
}, 2000); // 2秒后取消 timeout

在这个例子中，我们使用 addEventListener 方法监听 AbortSignal 的 abort 事件。 当 AbortSignal 被取消时，我们会调用 clearTimeout 函数来取消 setTimeout。

示例2：取消自定义的异步函数

function myAsyncFunction(signal) {
  return new Promise((resolve, reject) => {
    // 检查 AbortSignal 是否已经被取消
    if (signal.aborted) {
      reject(new Error('Operation aborted'));
      return;
    }

    // 监听 AbortSignal 的 abort 事件
    signal.addEventListener('abort', () => {
      reject(new Error('Operation aborted'));
    });

    // 模拟异步操作
    setTimeout(() => {
      resolve('Operation completed');
    }, 3000);
  });
}

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

myAsyncFunction(signal)
  .then(result => {
    console.log('Result:', result);
  })
  .catch(error => {
    console.error('Error:', error.message);
  });

// 在某个时刻，取消异步操作
setTimeout(() => {
  controller.abort();
}, 2000); // 2秒后取消异步操作

在这个例子中，我们在自定义的异步函数 myAsyncFunction 中，首先检查 AbortSignal 是否已经被取消。 如果已经被取消，则直接 reject Promise。

然后，我们使用 addEventListener 方法监听 AbortSignal 的 abort 事件。 当 AbortSignal 被取消时，我们会 reject Promise。

这样，我们就可以使用 AbortController 和 AbortSignal 来取消自定义的异步函数了。

传递取消原因

AbortController.abort() 方法可以接受一个可选的 reason 参数，用于指定取消的原因。 这个 reason 会被传递给 AbortSignal 对象的 reason 属性。

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

fetch('https://example.com/data', { signal })
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log('Data:', data);
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Fetch aborted. Reason:', signal.reason);
    } else {
      console.error('Fetch error:', error);
    }
  });

// 在某个时刻，取消请求
setTimeout(() => {
  controller.abort('Request timed out'); // 指定取消原因
}, 5000); // 5秒后取消请求

在这个例子中，我们在调用 controller.abort() 方法时，传递了一个字符串 'Request timed out' 作为取消原因。

在 catch 块中，我们可以通过 signal.reason 属性来获取取消原因。

throwIfAborted() 方法

AbortSignal 对象提供了一个 throwIfAborted() 方法，用于在异步操作开始之前检查 AbortSignal 的状态。 如果 AbortSignal 已经被取消，则直接抛出一个 AbortError 异常，避免执行不必要的代码。

function myAsyncFunction(signal) {
  try {
    signal.throwIfAborted(); // 检查 AbortSignal 是否已经被取消
  } catch (error) {
    console.log('Operation already aborted');
    return Promise.reject(error);
  }

  return new Promise((resolve, reject) => {
    // 监听 AbortSignal 的 abort 事件
    signal.addEventListener('abort', () => {
      reject(new Error('Operation aborted'));
    });

    // 模拟异步操作
    setTimeout(() => {
      resolve('Operation completed');
    }, 3000);
  });
}

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

// 在某个时刻，取消异步操作
setTimeout(() => {
  controller.abort();
}, 1000); // 1秒后取消异步操作

myAsyncFunction(signal)
  .then(result => {
    console.log('Result:', result);
  })
  .catch(error => {
    console.error('Error:', error.message);
  });

在这个例子中，我们在 myAsyncFunction 函数的开头调用了 signal.throwIfAborted() 方法。 如果在调用 myAsyncFunction 之前，AbortSignal 已经被取消，那么 signal.throwIfAborted() 方法会抛出一个 AbortError 异常，导致 myAsyncFunction 函数直接返回一个 rejected 的 Promise。

最佳实践

• 在发起异步操作之前，总是创建一个 AbortController 对象，并获取其 AbortSignal 对象。
• 将 AbortSignal 对象传递给异步操作。
• 在异步操作中，监听 AbortSignal 的 abort 事件，并在事件处理程序中停止异步操作。
• 在合适的时候，调用 AbortController.abort() 方法取消异步操作。
• 使用 signal.throwIfAborted() 方法在异步操作开始之前检查 AbortSignal 的状态。
• 合理使用 reason 参数，传递取消原因，方便调试。

总结

AbortController 和 AbortSignal 是一对非常实用的 API，可以帮助我们更好地控制异步操作的取消。 掌握它们的使用方法，可以使我们的代码更健壮，更易于维护。

好了，今天的讲座就到这里。 希望大家有所收获！ 下次再见！