在异步操作中退出不确定时长的回调函数

在使用 async/await 时，若需在不确定何时触发的回调函数中退出异步流程，可利用 Promise.withResolvers()接口来实现。

代码改写示例

以下为修改后的代码，将回调式的异步行为转换为可等待的 Promise：

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; // 等待观察器回调触发
};

实现原理

Promise.withResolvers()返回一个包含 Promise 及其对应解决器的对象，适用于此类场景：

• 在观察器的回调中调用 resolve()以解决 Promise

• 通过 await promise等待 Promise 被解决，即等待观察器回调被触发

注意事项

• Promise.withResolvers()目前处于 Stage 4 阶段，使用时需注意环境兼容性

• 在 TypeScript 中使用时，需确保 tsconfig.json中包含 "lib": ["esnext"]配置

async/awaitPromise.withResolvers()MutationObserver异步编程回调处理