新的標(biāo)準(zhǔn)里增加了原生的Promise。

這里只討論鏈?zhǔn)绞褂玫那闆r，思考一下其中的細(xì)節(jié)部分。

一，關(guān)于 then() 和 catch() 的復(fù)習(xí)

then() 和 catch() 的參數(shù)里可以放置 callback 函數(shù)用來接收一個(gè) Promise的最終結(jié)果。

then() 可以接收一個(gè)參數(shù)，那么這個(gè) callback 只會(huì)在 Promise resolve() 的時(shí)候被調(diào)用。

then() 還可以接收第二個(gè)參數(shù)，那么第二個(gè) callback 用來處理 Promise reject() 的情況。

catch() 專門處理 Promise reject() 的情況。

也就是說，then() 可以兼用，catch() 只能處理 reject() 的情況。不過，推薦 使用 then() 處理 resolve()，catch() 處理 reject()。

二，不過，我要講的不是上面的東西，以上只是復(fù)習(xí)一下基本用法。這里開始講 then() 和 catch() 的返回值和鏈?zhǔn)接梅ǖ募?xì)節(jié)。

那么官方文檔說，then() 和 catch() 都返回一個(gè) Promise ，這個(gè)說法就很耐人尋味了。（我是js新手，以前的在野的 promise 我沒有接觸過）。

首先，這個(gè)新返回的 Promise 不是原來的 Promise；

第二，這個(gè)新返回的 Promise 的狀態(tài)的變化(是resolve()了；還是reject()了。)跟上一個(gè) Promise 的狀態(tài) 和 then() 的使用方式有關(guān)。

先說明 then() 的情況：（catch 類似）

var p1 = Promise.resolve("Success");
var p2 = p1.then(task1);
var p3 = p2.then(task2);

注：上面的task1 和 task2 都是callback。

這里，p1是一個(gè)創(chuàng)建出來的 Promise，并且直接 resolve()了；

p2是用then() 得到的一個(gè) Promise， p3也是用then()得到的一個(gè) Promise。

那么p2的狀態(tài)如何改變呢，p3呢？

我準(zhǔn)備用下圖來講解這個(gè)概念：

其中，

1. 八邊形代表一個(gè)Promise對象。

2. 圓形代表一個(gè)Promise內(nèi)部的狀態(tài)，黑色箭頭代表狀態(tài)變化。

3. 向右的箭頭代表調(diào)用 then 函數(shù)。

4. 也就是說，只要調(diào)用 then 函數(shù)就會(huì)生成一個(gè)新的 Promise 對象。

5. 在調(diào)用 then 函數(shù)的時(shí)候，不知道前面一個(gè) Promise 對象的狀態(tài)是什么，是 pending 還是 settled？這個(gè)無法假設(shè)，在外界看不見。

6. then 函數(shù)的調(diào)用是不會(huì)阻塞的，也就是說，幾乎是瞬間 p2 和 p3 就是生成了，即使 p1 還在緩慢的遷移它自身的狀態(tài)。

我們知道，p1的狀態(tài)是被 resolve了 （見上面的代碼）。不過，這里還沒有說明白 p2 和 p3 的狀態(tài)是如何變化的，是 resolve 了還是 reject 了？看下面這個(gè)新圖。

可以看到多了菱形。

菱形代表 調(diào)用 then 時(shí)，傳入的 callback 函數(shù)。向上的菱形代表傳入了【針對 上一個(gè) Promise 對象 被 resolve 了的】處理，向下的菱形代表傳入了【針對上一個(gè) Promise 對象 被 reject 的】處理。

注意：本例中沒有傳入 針對 reject 的處理，也就是說，上圖中不該畫出向下的菱形，這里為了方便畫出了，只用知道向上向下的菱形跟我們具體如何使用 then 或者 catch 有關(guān)。再看一下示例代碼：

var p1 = Promise.resolve("Success");var p2 = p1.then(task1);//產(chǎn)生了向上的菱形var p3 = p2.then(task2);//產(chǎn)生了向上的菱形

可以看出，then 的 第二個(gè)參數(shù)我們沒有給出，也就是我們沒有處理 reject 的情況。

補(bǔ)充一句，如果想要處理 reject 可以使用 then ，也可以使用 catch，catch專門用來處理 reject ，除此之外，和 then 沒有區(qū)別。

1. 如果 p1 的最終狀態(tài)（resolve 或者 reject）被正確處理（調(diào)用 then 時(shí)，傳入了對應(yīng)的 callback，也就是有對應(yīng)的菱形）了，那么 p2 的狀態(tài)就會(huì)轉(zhuǎn)為 resolve。

2. 如果 p1 的最終狀態(tài)（resolve 或者 reject）沒有被正確處理（調(diào)用 then 時(shí)， 缺少了對應(yīng)的 callback，也就是沒有對應(yīng)的菱形），那么 p1 的狀態(tài)就會(huì)路由到 p2（接收 p1 的狀態(tài)）.

3. 如此傳遞下去。

4. 本文不講解，如何在 callback 中取得上一個(gè) Promise 最終數(shù)據(jù)，也就是說，數(shù)據(jù)如何傳遞，這個(gè)有很多教程了。

三，下面給出一些例子來總結(jié)本文。

圖中 P1的狀態(tài)是給定的，resolve或者reject，都是自己給定的。目的是推出 P2 和 P3 的最終狀態(tài)。

以上是四個(gè)獨(dú)立的例子，之間沒有聯(lián)系。

X代表P3沒有使用 then 或者 catch 函數(shù)，也就談不到 針對 resolve或者reject 的處理了。

最后，若有錯(cuò)誤，請及時(shí)指正，多謝！~?。~~~

以上這篇深入理解js promise chain就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評論