ES6Promise中then與catch的返回值的實(shí)例

一.catch為then的語(yǔ)法糖

故then方法與catch方法均會(huì)返回一個(gè)Promise對(duì)象（對(duì)，即使return 為某個(gè)值，或者throw error，或者不返回值）
我們來(lái)看看MDN的定義，這里可能為了嚴(yán)謹(jǐn)而說(shuō)得有點(diǎn)亂七八糟的

簡(jiǎn)單來(lái)說(shuō)，就是分為return 值（無(wú)return的情況下即返回undefined，也是返回值），throw error， return Promise

二.說(shuō)說(shuō)return值與throw error的情況。

1.return 值的情況：

返回的Promise會(huì)成為Fulfilled狀態(tài)。
return的值會(huì)作為新Promise對(duì)象下一個(gè)then的回調(diào)函數(shù)的參數(shù)值，貼代碼看例子

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); });

輸出結(jié)果如下：

調(diào)用fufill函數(shù)return value會(huì)傳給下一個(gè)回調(diào)函數(shù)
回到上面的疑問(wèn)，如果沒(méi)有return呢，那么就會(huì)返回undefined
(就是函數(shù)無(wú)return返回的是undefined的情況，基礎(chǔ)要扎實(shí)啊啊啊)

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

輸出結(jié)果如下：

2.throw error的情況：

返回的Promise會(huì)成為Rejected狀態(tài)，
下一步執(zhí)行catch中的回調(diào)函數(shù)或者then的第二個(gè)回調(diào)函數(shù)參數(shù)

這里出現(xiàn)了之前一直搞混的東西。
再次重復(fù)這一句話(huà)：catch為then的語(yǔ)法糖，它是then(null, rejection)的別名。
也就是說(shuō)，catch也是then，它用于捕獲錯(cuò)誤，它的參數(shù)也就是是then的第二個(gè)參數(shù)。
所以，假設(shè)catch中如果return 值的話(huà)，新的Promise對(duì)象也會(huì)是接受狀態(tài)。
看看例子：

var example = new Promise((fulfill, reject)=>{
 let i = 1;
 reject(i);
})
example
.catch(()=>{console.log('我是第一個(gè)catch的回調(diào)函數(shù)'); return 1;})
.then(() =>{console.log('我是第一個(gè)then的回調(diào)函數(shù)'); throw Error })
.catch(()=>{console.log('我是第二個(gè)catch的回調(diào)函數(shù)')})
.then(() => {console.log('我是第二個(gè)then的回調(diào)函數(shù)')})

結(jié)果如下圖：

調(diào)用reject函數(shù)后，promise變?yōu)閞ejected狀態(tài)，故執(zhí)行第一個(gè)catch的回調(diào)函數(shù)
第一個(gè)catch的回調(diào)函數(shù)return 1，故執(zhí)行第一個(gè)then的回調(diào)函數(shù)
第一個(gè)then的回調(diào)函數(shù)throw Error，故執(zhí)行第二個(gè)catch的回調(diào)函數(shù)
第二個(gè)catch的回調(diào)函數(shù)ruturn undefined（如上文所言），故執(zhí)行第二個(gè)then的回調(diào)函數(shù)

3.return Promise的情況

至于return Promise的情況下，其實(shí)同理啦，我只是剛開(kāi)始接觸Promise語(yǔ)法時(shí)感到不是很適應(yīng)：竟然會(huì)自動(dòng)為你生成Promise對(duì)象？！后來(lái)看了部分源碼剖析后才大致知道為什么會(huì)這樣子，鏈接也放下面吧

用新學(xué)的知識(shí)實(shí)踐封了個(gè)讀取<input type='file'>中圖片的插件：
https://github.com/Joeoeoe/-i...
哪里寫(xiě)得不好大家指出啊哈哈

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com