在现代 JavaScript 开发中，async/await 已经成为处理异步操作的标准方式。然而，在某些场景下，我们需要能够取消正在进行的异步操作，例如用户主动取消请求、组件卸载等。虽然 Bluebird 提供了可取消的 Promise，但 ES6 内置的 AbortController 提供了一种更简洁、更通用的解决方案。
AbortController 的核心思想是创建一个信号 (signal)，将其传递给异步操作，并在需要取消时触发该信号。异步操作监听该信号，并在接收到取消信号时执行相应的清理工作。
使用 AbortController 的步骤：
-
创建 AbortController 实例：
const controller = new AbortController(); const signal = controller.signal;
AbortController 负责管理取消信号。controller.signal 返回一个 AbortSignal 对象，该对象可以传递给异步操作。
-
将 AbortSignal 传递给异步操作：
let myP = (sig) => new Promise((resolve, reject) => { const tm = setTimeout(function () { console.log("before resolve"); resolve("Success!"); // Yay! Everything went well! }, 2500); //sig.onabort = () => { sig.addEventListener('abort', () => { console.log('aborted'); clearTimeout(tm); resolve(); // Or reject, depending on your logic }); });异步操作（这里是一个 Promise）通过 addEventListener('abort', callback) 监听 AbortSignal 的 abort 事件。当 abort 事件触发时，回调函数会被执行，可以在其中执行清理工作，例如取消定时器、关闭连接等。
注意： 在取消操作中，务必调用 resolve() 或 reject() 来结束 Promise，否则 async/await 会一直阻塞。通常情况下，建议调用 reject()，并传递一个错误信息，以便更好地处理取消事件。
-
触发取消信号：
setTimeout(() => controller.abort(), 1000);
当需要取消异步操作时，调用 controller.abort() 方法。这将触发 AbortSignal 的 abort 事件，并执行所有注册的回调函数。
完整示例：
let myP = (sig) =>
new Promise((resolve, reject) => {
const tm = setTimeout(function () {
console.log("before resolve");
resolve("Success!"); // Yay! Everything went well!
}, 2500);
//sig.onabort = () => {
sig.addEventListener('abort', () => {
console.log('aborted');
clearTimeout(tm);
resolve(); // Or reject, depending on your logic
});
});
const run = async () => {
console.log("Start");
const controller = new AbortController();
const prm = myP(controller.signal);
setTimeout(() => controller.abort(), 1000);
await prm;
console.log("After await prm");
};
run()
.then(() => console.log("Finished"))
.catch((e) => console.error(e));注意事项：
- AbortController 只能取消已经开始的异步操作。如果异步操作尚未开始，则无法取消。
- 在 abort 事件回调函数中，务必执行必要的清理工作，以避免资源泄漏。
- 可以使用同一个 AbortSignal 取消多个异步操作。这在需要同时取消多个相关操作时非常有用。
- AbortController 不仅可以用于 fetch API，还可以用于任何支持 AbortSignal 的异步操作。
总结：
AbortController 提供了一种简单而强大的机制，用于取消 async/await 中的异步操作。通过创建、传递和触发取消信号，可以有效地管理异步流程，提高程序的健壮性和用户体验。在需要取消异步操作的场景下，AbortController 是一个值得考虑的选择。
