前言

我學 Promise 的時候, 那時還沒有 es6. 曾經還自己實現過. 但時隔多年, 現在 es6 的 promise 已經很完善了.

這篇作為一個簡單的複習. (畢竟我已經 1 年多沒有寫 JS 了...)

以前寫過相關的文章:

Javascript Promise 學習(上)

Javascript Promise 學習 (中)

$q 就是angular 的promise

參考

阮一峰 – Promise 物件

Promise 解決的問題

什麼是非同步和回撥 callback

JS 是單執行緒, 無法併發處理事情, 但是它可以非同步. 比如發 http request, request 通過網絡卡發出去後, CPU 就去做別的事情, 而不是傻傻等網絡卡回覆.

當 response 回來以後, 網絡卡通知 CPU, 這時再把任務接回來. 這個動作就叫 callback. 就是你別等我, 我好了會通知你.

callback 的寫法長這樣

const callback = () => {
  console.log('timeout');
};
setTimeout(callback, 2000);

setTimeout 是一個非同步函式, 呼叫後, 遊覽器會用另一個執行緒去計算時間, 主執行緒繼續處理其它程式碼. 時間到, 主執行緒會被通知, 然後執行後續 (callback) 的程式碼.

大概是這個概念. 其它的非同步函式包括 Ajax, FileReader 等等 (通常涉及到磁碟 IO, 網路請求都會是非同步的. 因為做這些事情的時候不需要 CPU).

回撥地獄

callback 的寫法一旦巢狀就會變成很醜, unreadable.

比如, 我想寫一個

delay 3 秒,

執行 console 'a'

再 delay 2 秒

執行 console 'b'

再 delay 1 秒

執行 console 'c'

寫出來長這樣:

setTimeout(() => {
  console.log('a');
  setTimeout(() => {
    console.log('b');
    setTimeout(() => {
      console.log('c');
    }, 1000);
  }, 2000);
}, 
 
3000);

醜不醜? Promise 就是用來解決醜這個問題的. 它可以把巢狀的回撥 "打平" flat