ECMAScript之Promise

參考資料

1. https://promisesaplus.com/
2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

案例

1. setTimeout 和 Promise 執行順序

   示例代碼如下：

   setTimeout(() => console.log(1))
   new Promise((resolve, reject) => {
     console.log(2)
     resolve()
     console.log(6)
   }).then(() => {
     console.log(3)
   }, () => {
     console.log(4)
   })
   console.log(5)

   輸出結果是：26531
   解析：

   1. 運行時，調用棧先執行
   2. 創建 Promise 對象時，會立即執行傳入構造函數中 executor 函數
   3. 因此輸出 2 和 6，然後執行 then 函數，添加處理函數到 Promise 對象的消息處理隊列中
   4. 繼續執行調用棧中後續的代碼，輸出 5
   5. 調用棧執行完畢之後，會執行消息隊列中的任務
   6. promise 對象的消息隊列優先級高於 setTimeout
   7. 因此 3 比 1 先輸出

2. Promise 的嵌套

   示例代碼如下：

   new Promise((resolve, reject) => {
     console.log(1)
     resolve()
     new Promise((resolve, reject) => {
       console.log(4)
       resolve()
     }).then(() =>console.log(5))
   }).then(() => {
     console.log(2)
   }, () => {
     console.log(3)
   })
   new Promise((resolve, reject) => {
     console.log(6)
     resolve()
   }).then(() =>console.log(7))

   輸出結果：146527
   解析：

   1. 內部嵌套的 Promise 的隊列，具有更高的優先級，因此 5 在 2 之前輸出
   2. 先註冊的 Promise 的隊列具有更高的優先級，因此 7 比 2 先輸出