Promise 極簡版之不專業學習筆記
白話文範例
你現在是個公司的小員工, 老闆 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 他的觀念)