在Async/Await中优雅地终止回调函数
使用async/await进行异步操作时，如何安全地从一个执行时间不确定的回调函数中退出，是一个常见挑战。本文将针对一个场景，演示如何在async/await环境下有效控制回调函数的退出。
问题： 代码使用MutationObserver监听按钮属性变化，属性变化时需要退出异步函数。Promise的传统写法易于实现，但代码复杂时，嵌套的Promise会降低可读性和可维护性。目标是将代码改写为async/await风格，同时解决如何在回调函数中安全退出异步函数的问题。
示例代码：
// 使用Promise的传统写法const a = (): Promise => { return new Promise((resolve) => { const callback = (mutations: MutationRecord[]) => { // 监听按钮属性变化，在此处退出函数 resolve(); }; const observer = new MutationObserver(callback); observer.observe(buttonEl, { attributes: true }); // 调用Promise函数，成功后触发按钮点击事件，然后监听属性变化 p().then(() => { buttonEl.click(); }); });};// 使用async/await的写法const b = async (): Promise => { const callback = (mutations: MutationRecord[]) => { // 监听按钮属性变化，如何在此处退出函数？ }; const observer = new MutationObserver(callback); observer.observe(buttonEl, { attributes: true }); // 调用Promise函数，成功后触发按钮点击事件，然后监听属性变化 await p(); buttonEl.click();};
解决方案：
为了在async/await中实现与a函数相同的功能，可以使用Promise.withResolvers()方法。此方法返回一个包含Promise和resolve函数的对象。
改进后的代码：
const b = async (): Promise => { const { promise, resolve } = Promise.withResolvers(); const callback = (mutations: MutationRecord[]) => { resolve(); // 在回调函数中调用resolve()来解决Promise }; const observer = new MutationObserver(callback); observer.observe(buttonEl, { attributes: true }); await p(); buttonEl.click(); await promise; // 等待Promise解决};
兼容性说明：
Promise.withResolvers()目前处于提案阶段，并非所有浏览器都原生支持。为了保证兼容性，可能需要使用polyfill，例如core-js。 同样，TypeScript用户需要更新到5.4或更高版本，并在tsconfig.json中配置lib包含esnext。
通过Promise.withResolvers()，可以在回调函数中调用resolve()来解决Promise，从而有效地控制async/await函数的退出流程，避免复杂的Promise嵌套，提高代码的可读性和可维护性。
以上就是Async/Await中回调函数如何优雅退出？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1504064.html
微信扫一扫 
支付宝扫一扫 
