ES6 Promise——then與catch的返回值實踐

Jonithan發表於2018-07-07
Promise

以下是在學習Promise關於catch與then的疑惑總結

一.catch為then的語法糖

故then方法與catch方法均會返回一個Promise物件（對，即使return 為某個值，或者throw error，或者不返回值）
我們來看看MDN的定義，這裡可能為了嚴謹而說得有點亂七八糟的
clipboard.png

簡單來說，就是分為return 值（無return的情況下即返回undefined，也是返回值），throw error， return Promise

二.說說return值與throw error的情況。

1.return 值的情況：

返回的Promise會成為Fulfilled狀態。
return的值會作為新Promise物件下一個then的回撥函式的引數值，貼程式碼看例子

var example = new Promise((fulfill, reject)=>{
    let i = 1;
    fulfill(i);
})
example
.then((value)=>{ console.log(value); value++; return value;  })
.then((value) => {console.log(value);                        });

輸出結果如下：
clipboard.png

呼叫fufill函式return value會傳給下一個回撥函式
回到上面的疑問，如果沒有return呢，那麼就會返回undefined
(就是函式無return返回的是undefined的情況，基礎要紮實啊啊啊)

var example = new Promise((fulfill, reject)=>{
    let i = 1;
    fulfill(i);
})
example
.then((value)=>{ console.log(value); value++; })
.then((value) => {console.log(value);});

輸出結果如下：
clipboard.png

2.throw error的情況：

返回的Promise會成為Rejected狀態，
下一步執行catch中的回撥函式或者then的第二個回撥函式引數

這裡出現了之前一直搞混的東西。
再次重複這一句話：catch為then的語法糖，它是then(null, rejection)的別名。
也就是說，catch也是then，它用於捕獲錯誤，它的引數也就是是then的第二個引數。
所以，假設catch中如果return 值的話，新的Promise物件也會是接受狀態。
看看例子：

var example = new Promise((fulfill, reject)=>{
    let i = 1;
    reject(i);
})
example
.catch(()=>{console.log('我是第一個catch的回撥函式'); return 1;})
.then(() =>{console.log('我是第一個then的回撥函式');    throw Error    })
.catch(()=>{console.log('我是第二個catch的回撥函式')})
.then(() => {console.log('我是第二個then的回撥函式')})

結果如下圖：
clipboard.png
呼叫reject函式後，promise變為rejected狀態，故執行第一個catch的回撥函式
第一個catch的回撥函式return 1，故執行第一個then的回撥函式
第一個then的回撥函式throw Error，故執行第二個catch的回撥函式
第二個catch的回撥函式ruturn undefined（如上文所言），故執行第二個then的回撥函式

3.return Promise的情況

至於return Promise的情況下，其實同理啦，我只是剛開始接觸Promise語法時感到不是很適應：竟然會自動為你生成Promise物件？！後來看了部分原始碼剖析後才大致知道為什麼會這樣子，連結也放下面吧

連結：
MDN：catch：https://developer.mozilla.org...
MDN：then：https://developer.mozilla.org...
Promise實現：https://tech.meituan.com/prom...

相關文章