我要评论
在async/await中优雅地终止回调函数
使用async/await进行异步操作时，如何安全地从一个执行时间不确定的回调函数中退出，是一个常见挑战。本文将针对一个场景，演示如何在async/await环境下有效控制回调函数的退出。
问题： 代码使用mutationobserver监听按钮属性变化，属性变化时需要退出异步函数。promise的传统写法易于实现，但代码复杂时，嵌套的promise会降低可读性和可维护性。目标是将代码改写为async/await风格，同时解决如何在回调函数中安全退出异步函数的问题。
示例代码：
// 使用promise的传统写法
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();
});
});
};
// 使用async/await的写法
const b = async (): promise<void> => {
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<void> => {
const { promise, resolve } = promise.withresolvers<void>();
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中回调函数如何优雅退出？的详细内容，更多请关注代码网其它相关文章！
发表评论