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

Question

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

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

如上述示例代码，a是常规的Promise写法，现在想要改成b那样的async写法，请问该怎么办？

想要这么改的原因是函数内部的逻辑逐渐复杂，会调用多个Promise函数，常规写法会陷入层层嵌套的窘境，不利于维护。

Answer 1

你的需求可能需要最新的Promise.withResolvers()接口，目前还是Stage-4阶段。

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

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

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

这个功能才出没多久，考虑兼容旧的浏览器，你可能需要更新core-js。
另外，你用了TS，如果需要通过类型检查，可能还要把TS更新到5.4或以上，然后在tsconfig.json里确保配置lib有ESNext这一项。

Answer 2

只把observer相关逻辑用Promise包起来？

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

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

Answer 3

退出 Promise 的做法万变不离其宗，那就是：改变 Promise 实例的状态。成功就 resolve，失败就 reject。

最简单的做法就是保留函数的引用。然后必要的时候调用它。

let resolve;
let reject
const p = new Promise((res, rej) => {
  resolve = res;
  reject = rej;
});
const callback = () => {
  resolve();
}
// 做你需要的其它事情
// .... 省略代码若干
// 等待 promise
await p;

你也可以在 await 那里适当加个 Promise.race 作为超时保护。