我要评论
异步编程中优雅地处理回调函数退出
本文探讨在使用async/await时，如何有效退出由回调函数触发的异步操作。 问题源于将基于promise的回调函数改写为async/await风格，以避免嵌套回调导致的代码混乱。
原始代码使用mutationobserver监听按钮属性变化，并在回调函数中使用resolve结束promise。然而，在async/await环境下，直接在回调函数中使用resolve并非最佳方案。
问题代码示例：
const a = (): promise<void> => {
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<void> => {
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<void> => {
const { promise, resolve } = promise.withresolvers<void>();
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操作？的详细内容，更多请关注代码网其它相关文章！
发表评论