一道关于事件循环的代码题，希望不吝赐教~

Question

题目：

const pA = () => {
  return new Promise(resolve => {
    resolve()
  })
}

const fn1 = async () => {
  fn2()
}
const fn2 = async () => {
  await pA()
  console.log('b')
}
async function fn() {
  await fn1()
  console.log('a')
}
fn() // b a

为什么输出是先b后a？

我是这么理解的【找bug】：
运行fn，检测到await，其后的代码会被添加到微任务队列，称作任务A，
fn的主代码块执行完毕，执行任务A，
执行fn1，执行fn2，发现了微任务pA()...，添加到微任务队列，称作任务B，
fn1的代码块执行完毕，发现没有返回值，便默认返回了Promise.resolve()，继续执行任务A代码块，【输出a】，
任务A执行完毕，执行任务B，【输出b】

但输出结果是先b后a，想了半天也说服不了自己~
希望各位不吝赐教，Thanks?(?ω?)?

Answer 1

const pA = () => {
  return new Promise(resolve => {
    resolve()
  })
}

const fn1 = () => {
  fn2()
    return  Promise.resolve()
}
const fn2 = () => {
  pA().then(() => console.log('b'))
  return Promise.resolve()
}
function fn() {
  fn1().then(() => console.log('a'))
}
fn() // b a

---

async/await不过是promise语法糖，你把await转为promise.then
比如

await fn1()
console.log('a')

=>

fn1().then(() => console.log('a'))

而且这个是层层嵌套的，如果fn1里也有await，那么同样把fn1替换为内部的promise.then。
await一旦用不好和回调地狱是一样的。它具有迷惑性。