Async/Await中回调函数如何优雅退出？

在Async/Await中优雅地终止回调函数

使用async/await进行异步操作时，如何安全地从一个执行时间不确定的回调函数中退出，是一个常见挑战。本文将针对一个场景，演示如何在async/await环境下有效控制回调函数的退出。

问题： 代码使用MutationObserver监听按钮属性变化，属性变化时需要退出异步函数。Promise的传统写法易于实现，但代码复杂时，嵌套的Promise会降低可读性和可维护性。目标是将代码改写为async/await风格，同时解决如何在回调函数中安全退出异步函数的问题。

示例代码：

// 使用Promise的传统写法
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();
    });
  });
};

// 使用async/await的写法
const b = async (): Promise => {
  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函数的对象。

Cutout.Pro抠图

AI批量抠图去背景

下载

改进后的代码：

const b = async (): Promise => {
  const { promise, resolve } = Promise.withResolvers();

  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嵌套，提高代码的可读性和可维护性。