在现代 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 是一个值得考虑的选择。
以上就是使用 AbortController 实现可取消的 Async/Await 操作的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1527643.html
微信扫一扫 
支付宝扫一扫 
