天天看點

promise對象及then與catch的傳回值實踐

一、簡介

(1)将異步操作的寫法寫成了同步的。并沒有真正将異步變成同步,而是将異步回調函數的寫法寫成了同步的寫法,避免了層層嵌套的回調函數。此外,Promise對象提供統一的接口,使得控制異步操作更加容易。

promise是個類,是以需要通過new關鍵字來操作。參數是一個函數,我們可以在内部執行異步操作,該函數有兩個參數,一個是成功時候執行的函數,一個是失敗時候執行的函數。

(2)在promise對象中有三個狀态:padding,任務正在進行,resolved任務成功的執行完畢,rejected任務失敗的執行完畢。隻有兩種狀态的改變:由padding進入reaolve,任務成功過的執行完畢,由padding進入reject,任務失敗的執行完畢,是以一個promise對象隻有倆狀态。

promise對象及then與catch的傳回值實踐

(3)通過then方法來監聽promise對象

then方法有兩個參數,一個是成功時候的執行的回調函數,一個是失敗時候執行的回調函數。回調函數的參數是,resolve或者reject函數傳遞的。作用域都是window。

then方法的傳回值是個新的promise對象,是以回調函數沒有了參數,是以我們盡量把業務邏輯寫在第一個then方法中。

promise對象及then與catch的傳回值實踐
promise對象及then與catch的傳回值實踐

(4)多個異步操作,此時我們可以通過promise.all來監聽這些異步操作,all的參數是一個數組,每一成代表一個異步操作。

then方法的回調函數的參數,就是每一次執行異步操作傳遞的參數,有一個異步操作失敗,失敗的回調函數就執行了,隻有所有的異步操作都執行成功,成功的回調函數才會執行。

在異步操作之後為promise對象定義回調函數,會立即執行,因為此時狀态已經改變了。

promise對象及then與catch的傳回值實踐

二、Promise對象有以下兩個特點。

(1)對象的狀态不受外界影響。Promise對象代表一個異步操作,有三種狀态:pending(進行中)、fulfilled(已成功)和rejected(已失敗)。隻有異步操作的結果,可以決定目前是哪一種狀态,任何其他操作都無法改變這個狀态。這也是Promise這個名字的由來,它的英語意思就是“承諾”,表示其他手段無法改變。

(2)一旦狀态改變,就不會再變,任何時候都可以得到這個結果。Promise對象的狀态改變,隻有兩種可能:從pending變為fulfilled和從pending變為rejected。隻要這兩種情況發生,狀态就凝固了,不會再變了,會一直保持這個結果,這時就稱為 resolved(已定型)。如果改變已經發生了,你再對Promise對象添加回調函數,也會立即得到這個結果。這與事件(Event)完全不同,事件的特點是,如果你錯過了它,再去監聽,是得不到結果的。

三、ES6 Promise——then與catch的傳回值實踐

then方法是異步執行

當.then()前的方法執行完成後,再執行then()内部的程式,這樣就避免了資料沒擷取到等的問題。

then()方法允許你指定實作承諾的時候要完成的工作

文法:

promise對象及then與catch的傳回值實踐
promise對象及then與catch的傳回值實踐

異步舉例

承諾必須完成(傳回一個值)或者必須被拒絕(傳回一個原因)。承諾完成或被拒絕時(無論哪一個先發生),Promise 對象的

then

方法都會運作。

如果承諾成功完成,則将運作

方法的履行處理程式函數。如果承諾被拒絕,則将運作

方法(或

catch

方法)的錯誤處理程式函數。

下面的示例示範如何調用傳回承諾的函數 (timeout)。

達到 5000 ms 的逾時時間後,将運作

方法的履行處理程式。

promise對象及then與catch的傳回值實踐

以下是關于catch與then的疑惑總結

先從一個面試題開始:

promise對象及then與catch的傳回值實踐

答案是2,如下:

1、建立一個Promise對象,輸出1;

2、結果+1,現在的輸出為2;

3、輸出結果被抛棄,抛出一個error;

4、error被丢棄,傳回一個新的value(1);

5、catch進行異常處理,但catch後程式不停止執行,傳回一個資訊+1,之後的value(2);

6、value正常輸出;

7、value已經正常輸出,這一行不會執行

(一)catch為then的文法糖

故then方法與catch方法均會傳回一個Promise(即使return為某一個值,或者throw error,或者不傳回值)。簡單來說,就是分為return 值(無return的情況下即傳回undefined,也是傳回值),throw error, return Promise

(二)return 值與throw error的情況

        1、return 值的情況:

          傳回的Promise會成為Fulfilled狀态。

            return的值會作為Promise對象下一個then的回調函數的參數值

promise對象及then與catch的傳回值實踐

輸出結果如下:

promise對象及then與catch的傳回值實踐

調用fufill函數return value會傳給下一個回調函數,回到上面的疑問,如果沒有return呢,那麼就會傳回undefined(就是函數無return傳回的是undefined的)

promise對象及then與catch的傳回值實踐
promise對象及then與catch的傳回值實踐

        2、throw error的情況

    傳回的promise會成為Reject狀态,下一步執行catch中的回調函數或者then的第二個回調函數的參數

再次重複這一句話:catch為then的文法糖,它是then(null,rejection)的别名,也就是說catch也是then,它用于捕獲錯誤,它的參數也就是then的第二個參數,是以,假設catch中如果return值的話,新的promise對象也會是接受狀态。看看例子:

promise對象及then與catch的傳回值實踐
promise對象及then與catch的傳回值實踐

調用reject函數後,promise變為reject的狀态,故執行第一個catch的回調函數

第一個catch的回調函數return 1,故執行第一個then的回調函數

第一個then的回調函數throw Error,故執行第二個catch的回調函數

第二個catch的回調函數return undefined(如上文所言),故執行第二個then的回調函數

    3、return Promise的情況

至于return Promise的情況,就不多說了。