Promise 極簡版之不專業學習筆記

Jan 26, 2020 javascript promise nodejs
Share on:

JsPromise

白話文範例

你現在是個公司的小員工, 老闆 promise(承諾) 大家, 如果月底他心情好, 要幫大家加薪

因此大家拿到的是個 promise, 目前處於 等待一種不確定狀態的狀態, 這個 promise 有 3 種狀態

  • pending: 結果發生之前的一種等待, 尚未發生的狀態.
  • resolved: 完成了 promise(履約承諾)
  • rejected: 拒絕了 promise(履約承諾)

簡單的來說, 這個 promise 目前是 pending, 時間到了的話

  • 可能為 resolved(fulfilled), 真的加薪了
  • 可能為 rejected, 你還是一樣窮. 呵呵, 因為這裡是台灣
  • 可能依舊 pending(老闆又改條件) 現實生活應該存在這種結果, 但程式裡頭似乎沒這選項

程式範例

上述範例的程式

 1let isPerformanceOK = false;
 2
 3// 底下這包不會馬上執行, 而是得 "經由其他事情再來觸發執行"
 4let willRaiseSalary = new Promise(function(resolve, reject) {
 5    if (isPerformanceOK) {
 6        let additionalPayments = {
 7            newPay: 10000,
 8            currency: 'NTD'
 9        }
10        resolve(additionalPayments);
11    } else {
12        let reason = new Error("Don't cry, you can do better");
13        reject(reason);
14    }
15});

Promise 所表達的是 非同步操作的結果, 可能為 resolved 或 rejected

拿到 promise 的後續操作

 1var askYourBoss = function() {
 2    // 這時候再來看看履約的結果
 3    willRaiseSalary.then(function(fulfilled) {  // fulfilled 為 成功的結果
 4        console.log(fulfilled);
 5    }).catch(function(err) {  // err 為 失敗的結果
 6        console.log(err.message);
 7    });
 8}
 9
10// 月底了, 去問候你老闆吧
11askYourBoss();

鏈式調用 Promise

承接上面的故事, 你也對你女朋友(醒醒吧,你沒有!) 履約說, 如果有加薪, 要請她吃大餐

1
2var eatBigMealWithRightHand = function(additionalPayments) {
3    return new Promise(function(resolve, reject) {
4        let restaurant = 'Lu-Biean-Tan';
5        resolve(restaurant);
6    });
7}

而以程式流程的觀點, 上面的 eatBigMealWithRightHand 要放在 willRaiseSalary 裏頭

但因為這樣寫有點不直覺, 所以上述程式可以串連 promise

 1var askYourBoss = function() {
 2    willRaiseSalary
 3        .then(eatBigMealWithGF)
 4        .then(function(fulfilled) {
 5            console.log("吃完大餐後要做的事情2...");
 6        })
 7        .then(function(fulfilled) {
 8            console.log("吃完大餐後要做的事情3...");
 9        })
10        .catch(function(error) {
11            console.log(error.message);
12        });
13}

Summary

以上只簡單紀錄 Promise 這東東, 以及他的基本概念

至於 ES6, ES7, async, await, Observables 等等比較近代化一點的寫法, 就去參考 Reference 那篇

我覺得他寫的還蠻不錯的(其實我只改範例... 內文幾乎都是 Copy 他的觀念)

Reference

comments powered by Disqus