异步编程中如何优雅地从回调函数退出async/await操作？

异步编程中优雅地处理回调函数退出

本文探讨在使用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环境下更清晰、优雅地处理异步操作中的回调函数退出问题。