新的標準裡增加了原生的Promise。
這裡只討論鍊式使用的情況,思考一下其中的細節部分。
一,關於then() 和catch() 的複習
then() 和catch() 的參數里可以放置callback 函數用來接收一個Promise的最終結果。
then() 可以接收一個參數,那麼這個callback 只會在Promise resolve() 的時候被調用。
then() 還可以接收第二個參數,那麼第二個callback 用來處理Promise reject() 的情況。
catch() 專門處理Promise reject() 的情況。
也就是說,then() 可以兼用,catch() 只能處理reject() 的情況。不過,推薦使用then() 處理resolve(),catch() 處理reject()。
二,不過,我要講的不是上面的東西,以上只是複習一下基本用法。這裡開始講then() 和catch() 的返回值和鍊式用法的細節。
那麼官方文檔說,then() 和catch() 都返回一個Promise ,這個說法就很耐人尋味了。 (我是js新手,以前的在野的promise 我沒有接觸過)。
首先,這個新返回的Promise 不是原來的Promise;
第二,這個新返回的Promise 的狀態的變化(是resolve()了;還是reject()了。)跟上一個Promise 的狀態和then() 的使用方式有關。
先說明then() 的情況:(catch 類似)
var p1 = Promise.resolve("Success");var p2 = p1.then(task1);var p3 = p2.then(task2);注:上面的task1 和task2 都是callback。
這裡,p1是一個創建出來的Promise,並且直接resolve()了;
p2是用then() 得到的一個Promise, p3也是用then()得到的一個Promise。
那麼p2的狀態如何改變呢,p3呢?
我準備用下圖來講解這個概念:
其中,
1. 八邊形代表一個Promise對象。
2. 圓形代表一個Promise內部的狀態,黑色箭頭代表狀態變化。
3. 向右的箭頭代表調用then 函數。
4. 也就是說,只要調用then 函數就會生成一個新的Promise 對象。
5. 在調用then 函數的時候,不知道前面一個Promise 對象的狀態是什麼,是pending 還是settled?這個無法假設,在外界看不見。
6. then 函數的調用是不會阻塞的,也就是說,幾乎是瞬間p2 和p3 就是生成了,即使p1 還在緩慢的遷移它自身的狀態。
我們知道,p1的狀態是被resolve了(見上面的代碼)。不過,這裡還沒有說明白p2 和p3 的狀態是如何變化的,是resolve 了還是reject 了?看下面這個新圖。
可以看到多了菱形。
菱形代表調用then 時,傳入的callback 函數。向上的菱形代表傳入了【針對上一個Promise 對像被resolve 了的】處理,向下的菱形代表傳入了【針對上一個Promise 對像被reject 的】處理。
注意:本例中沒有傳入針對reject 的處理,也就是說,上圖中不該畫出向下的菱形,這里為了方便畫出了,只用知道向上向下的菱形跟我們具體如何使用then 或者catch 有關。再看一下示例代碼:
var p1 = Promise.resolve("Success");var p2 = p1.then(task1);//產生了向上的菱形var p3 = p2.then(task2);//產生了向上的菱形可以看出,then 的第二個參數我們沒有給出,也就是我們沒有處理reject 的情況。
補充一句,如果想要處理reject 可以使用then ,也可以使用catch,catch專門用來處理reject ,除此之外,和then 沒有區別。
1. 如果p1 的最終狀態(resolve 或者reject)被正確處理(調用then 時,傳入了對應的callback,也就是有對應的菱形)了,那麼p2 的狀態就會轉為resolve。
2. 如果p1 的最終狀態(resolve 或者reject)沒有被正確處理(調用then 時, 缺少了對應的callback,也就是沒有對應的菱形),那麼p1 的狀態就會路由到p2(接收p1 的狀態).
3. 如此傳遞下去。
4. 本文不講解,如何在callback 中取得上一個Promise 最終數據,也就是說,數據如何傳遞,這個有很多教程了。
三,下面給出一些例子來總結本文。
圖中P1的狀態是給定的,resolve或者reject,都是自己給定的。目的是推出P2 和P3 的最終狀態。
以上是四個獨立的例子,之間沒有聯繫。
X代表P3沒有使用then 或者catch 函數,也就談不到針對resolve或者reject 的處理了。
最後,若有錯誤,請及時指正,多謝! ~! ! @~~~
以上這篇深入理解js promise chain就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持武林網。