async函数含try/catch块时，哪些内容会进入Microtask Queue？

先确认你对无try/catch的async函数的理解是正确的：

async function foo() {
  await bar();
  baz();
}

确实等价于：

function foo() {
  return new Promise((resolve) => {
    resolve(bar());
  }).then(() => {
    baz();
  });
}

这里() => baz()会被加入微任务队列。

再看带try/catch的情况，我们先写出等价的Promise链式调用代码：

function foo() {
  return Promise.resolve(bar())
    // 对应try块中await的成功分支
    .then(() => {
      // try块中await之后无额外逻辑，此处为空
    })
    // 对应catch块处理await的失败分支
    .catch(() => {
      baz();
    })
    // 对应try/catch之后的qux()
    .then(() => {
      qux();
    });
}

接下来分析哪些内容会进入微任务队列：

• 当bar()返回的Promise成功resolve时：
  第一个then的空回调会进入微任务队列，执行完成后，执行qux()的then回调也会进入微任务队列——最终是qux()的执行逻辑进入微任务队列。
• 当bar()返回的Promise失败reject时：
  执行baz()的catch回调会进入微任务队列，完成后，执行qux()的then回调同样进入微任务队列——也就是baz()和qux()的执行逻辑都会进入微任务队列。

简单总结：

• bar()成功时：只有qux()进入微任务队列
• bar()失败时：baz()和qux()都会进入微任务队列

内容的提问来源于stack exchange，提问作者AlexBor