Async/Await中如何优雅地退出不确定时间的回调函数？

如何使用 async await 退出不确定时间的回调函数？

在使用 async await 编写异步代码时，有时会出现需要从不确定时间的回调函数中退出的情况。通常情况下，常规的 promise 写法可以使用 then() 链式调用来退出，但 async await 写法没有直接的退出方式。

例如，如下代码中的函数 a 使用 promise 写法，其中回调函数 callback 可以监听按钮属性的变化，并通过 resolve() 触发退出函数：

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();
    });
  });
};

然而，如果将 a 函数改写成 async await 写法（即函数 b），就无法直接通过 resolve() 来退出回调函数：

const b = async (): promise => {
  const callback = (mutations: mutationrecord[]) => {
    // 监听按钮的某个属性变化，怎么在此处退出函数？
  };
  const observer = new mutationobserver(callback);
  observer.observe(buttonel, {
    attributes: true,
  });

  // 调用一个 promise 函数，成功后触发按钮的点击事件，然后监听按钮的属性变化
  await p();
  buttonel.click();
};

针对上述问题，目前可以采用比较新的 promise.withresolvers() 接口来实现退出。该接口处于 stage-4 阶段，它可以创建一个 promise，并提供对应的 resolve 和 reject 回调函数：

Melodrive

Melodrive -一个AI音乐引擎，根据用户的情绪状态和喜好生成个性化的音乐。

下载

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

  const callback = (mutations: MutationRecord[]) => {
    resolve();
  };
  const observer = new MutationObserver(callback);
  observer.observe(buttonEl, {
    attributes: true,
  });

  // 调用一个 Promise 函数，成功后触发按钮的点击事件，然后监听按钮的属性变化
  await p();
  buttonEl.click();

  // 下面这句也可以用 return promise，取决于你的后续逻辑
  await promise
};

使用 promise.withresolvers() 接口，可以在回调函数中通过调用 resolve() 来触发 promise 的完成。这样就实现了从不确定时间的回调函数中退出 async await 函数的目的。

需要注意的是，promise.withresolvers() 接口目前尚未得到广泛支持，如果你需要兼容旧的浏览器，可能需要更新 core-js。此外，如果你使用了 typescript，需要将 ts 更新到 5.4 或以上，并在 tsconfig.json 文件中确保 lib 选项包含 esnext。