拿自己寫的例子來說明執行順序

console.log('st');

setTimeout(()=>{
  console.log('ed');
}, 0);

let b=async()=>{
  console.log('b-st');
  return 'b-ed'
}

let a=async ()=>{
  console.log('a-st');
  
  return 'a-ed'

}


a()
.then(res=>{
  console.log(res);
})
.then(res=>{
  console.log('d');
})
.then(res=>{
  console.log('f');
})

b()
.then(res=>{
  console.log(res);
})
.then(res=>{
  console.log('e');
})
.then(res=>{
  console.log('g');
})


console.log('c');

//順序： st, a-st, b-st, c, a-ed, b-ed, d, e, f, g, ed
 

任務順序（#a.b表示#巨集任務.微任務）

#1.0

• console.log('st') → 'st'
• setTimeout → 將console.log('ed')推送到#2.0
• a() → 'a-st' → 將後面的.then推送到#1.1
• b() → 'b-st' → 將後面的.then推送到#1.1
• console.log('c')

#1.1

• .then → 'a-ed' → 將後面的.then推送到#1.2
• .then → 'b-ed' → 將後面的.then推送到#1.2

#1.2

• .then → 'd' → 將後面的.then推送到#1.3
• .then → 'e' → 將後面的.then
  推送到#1.3

#1.3

• .then → 'f'
• .then → 'g'

#2.0
console.log('ed') → 'ed'

如果引入一句await

let w=async()=>{
  console.log('w-st');
  return 'w-ed'
}

let b=async()=>{
  console.log('b-st');
  console.log(await w()); //新增的
  return 'b-ed'
}

後果就是

• await後的w()會先執行，
• 而b()後續程式碼推送到#1.1這一步（原本是第一個then推送到#1.1）
• 第一個then被推到了#1.2（原本是第二個then推到#1.2)
  所以整體都比原本慢了一拍
  最終輸出就是：st, a-st, b-st, w-st, c, a-ed, w-ed, d, b-ed, f, e, g, ed