异步编程中优雅地处理回调函数退出
本文探讨在使用async/await时，如何有效退出由回调函数触发的异步操作。 问题源于将基于Promise的回调函数改写为async/await风格，以避免嵌套回调导致的代码混乱。
原始代码使用MutationObserver监听按钮属性变化，并在回调函数中使用resolve结束Promise。然而，在async/await环境下，直接在回调函数中使用resolve并非最佳方案。
问题代码示例：
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()); });};const b = async (): Promise => { const callback = (mutations: MutationRecord[]) => { // 监听按钮属性变化，如何在此处退出函数？ }; const observer = new MutationObserver(callback); observer.observe(buttonEl, { attributes: true }); await p(); buttonEl.click();};
解决方案：使用Promise.withResolvers()
Promise.withResolvers() 方法创建一个Promise，并同时返回resolve函数。 这样，我们可以在回调函数中调用resolve来结束Promise，从而在async函数中优雅地退出。
改进后的代码：
const b = async (): Promise => { const { promise, resolve } = Promise.withResolvers(); const callback = (mutations: MutationRecord[]) => { resolve(); }; const observer = new MutationObserver(callback); observer.observe(buttonEl, { attributes: true }); await p(); buttonEl.click(); await promise; // 或 return promise; 取决于后续逻辑};
兼容性说明：
Promise.withResolvers() 是较新的特性，需要TypeScript 5.4 或更高版本，并在tsconfig.json中配置lib包含esnext。 可能还需要更新core-js以确保兼容性。
通过Promise.withResolvers()，我们可以在async/await环境下更清晰、优雅地处理异步操作中的回调函数退出问题。
以上就是异步编程中如何优雅地从回调函数退出async/await操作？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1503262.html
微信扫一扫 
支付宝扫一扫 
