使用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嵌套，提高代码的可读性和可维护性。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
