淺淺淺談 Javascript — promise(二) : promise

Appx 實習心得（二）

上次我們解釋了callback function，這章將進入正題，好好解釋promise。

本篇概念取自：https://scotch.io/tutorials/javascript-promises-for-dummies，英文好的朋友可以到原文網站閱讀

理解Promise

Promise就是英文的承諾，而程式中的承諾其實就跟現實生活中的意思一樣。

「想像你是個孩子，你媽媽 承諾 你要買 新玩具 給你，你 不知道 你媽媽是否真的會買給你。 他有可能 真的 買玩具給你，也有可能只是說說而已，拒絕 買玩具給你。」

以上例子就是個承諾，而程式中的承諾分成了三個狀態

1. Pending(等待): 你 不知道 是否會拿到新玩具。
2. Fulfilled(實現): 媽媽 真的 買了新玩具給你。
3. Rejected(拒絕): 媽媽 只是說說而已，拒絕 買玩具。

以上的例子轉成程式碼，就會如以下：

let isHappy = false;
let willGetToy = new Promise(  //買玩具給你的承諾
    (resolve, reject) => {
        if(isHappy){
            let toy = 'toy car!'; 
            resolve(toy);  //實現了
        }else{
            let reason = new Error('mom is unhappy')
            reject(reason)  //拒絕了
        }
    }    
);
//使用這個Promise
const askMom = () => {
    willGetToy
    .then((res) => {  //承諾實現了，程式執行這段
        console.log(res);  //print: toy car
    })
    .catch((err) => { //承諾被拒絕了，程式執行這段
        console.log(err.message) //print: mom is unhappy
    })
};
askMom();
//本例中會跑出來的結果為 Error: mom is unhappy 
//將isHappy 改為 true， 結果就會變成: toy car

其中：
1. then 會選擇Promise呼叫resolve的程式執行
2. catch 會選擇Promise呼叫reject的程式執行

resolve 和 reject 就是callback function，並且沒有規定一定要叫這個名字

你又會問，那pending是怎麼樣呢？
若Promise執行時，程式還沒執行好就會印出狀態為pending（例如，你在resolve那裡，加上setTimeOut就會印出Promise正在pending狀態）

Promise是可鏈接的(chainable)

「你 承諾 朋友在 收到 玩具之後，會分享給他們一起 玩 」

let share = (toy) => {
    return new Promise(
        (resolve, reject) => {
            let message = ‘Hey, I got a ' + toy;
            resolve(message)
    });
}
let askMom = () => {
    willGetToy
    .then(share) //chain
    .then(res => console.log(res)) //print: Hey, I got a toy car
    .catch(err => console.log(error.message)) //print: mom is unhappy
}
askMom();

Promise就是這麼簡單，那麼你會問說，為什麼一定要用Promise呢？

未完待續...

reference:
https://scotch.io/tutorials/javascript-promises-for-dummies