Promise的白話理解及範例

Promise 概念：

想像一下你是個孩子，你媽承諾(Promise)你下個禮拜會送你一隻新手機。

現在你並不知道下個禮拜你會不會拿到手機。你媽可能真的買了新手機給你，或者因為你惹她不開心而取消了這個承諾。

這就是一個 Promise，一個 Promise 有三種狀態：

• pending 未發生、等待的狀態。到下週前，你還不知道這件事會怎樣。
• resolved 完成/履行承諾。你媽真的買了手機給你。
• rejected 拒絕承諾。沒收到手機，因為你惹她不開心而取消了這個承諾。

總結來說狀態有 等待、成功、失敗，使用情境就是我們當前還不知道結果，需要等待結果發生才繼續後續的處理。

從上面的比喻對應到 Javascript。

var isMomHappy = false
 
var willIGetNewPhone = new Promise(function (resolve, reject) {
  if (isMomHappy) {
    var phone = {
      brand: 'Samsung',
      color: 'black',
      type: 's8'
    }
    resolve(phone)
  } else {
    var reason = new Error('Mom is unhappy')
    reject(reason)
  }
})

上面這段程式碼解釋如下：

• 第一行我們使用一個 Boolean isMomHappy 定義媽媽是否開心。
• 宣告一個 Promise willIGetNewPhone。這個 Promise 可能是被履行(resolved)又或者拒絕(rejected)。
• Promise 標準的語法可以參考 MDN

如果一個 Promise 執行成功要在內部 function 呼叫 resolve(成功結果)，如果結果是失敗則呼叫 reject(失敗結果)。

var askMom = function () {
  willIGetNewPhone
    .then(function (fulfilled) {
      console.log(fulfilled)
    })
    .catch(function (error) {
      console.log(error.message)
    })
}
askMom()

首先有個 function 叫 askMom 在這個 function 中，將利用 Promise willIGetNewPhone。

希望一旦等待的結果發生時可以採取對應的動作，可以使用 .then 或 .catch 來執行對應的行為。

在這個範例中，在 .then 中使用 function (fulfilled){}，而這個 fulfilled 就是從 Promise 的 resolve(成功結果) 傳來的結果，範例中這個結果就是 phone 物件。

在 .catch 中使用了 function (error) {}。而這個 error 就是從 Promise 的 reject(失敗結果) 傳來的即 reason。

以上是擷錄自下面這個網頁，目前我理解及需要用的部份，並修改了一下方便之後快速再看一遍。

REF

https://andyyou.github.io/2017/06/27/js-promise/