1. 程式人生 > >ES6特性之Promise總結

ES6特性之Promise總結

Promise是ES6新特性中知名度非常高的點,我實力不濟寫的不會很好,如果看官想深入學習Promise請移步其他比較權威的著作,比如阮一峰老師的《ES6入門標準》《JavaScript Promise迷你書(中文版)》或者直接看"promise/A+"標準也行。我這篇文章的目的只是為我自己備忘而作,當然您也可以略作瀏覽,難免有所收穫嘛!


JavaScript非同步程式設計有四種解決方案:回撥函式,事件監聽,釋出/訂閱, Promise;

對,Promise是一種當前非常流行的解決JavaScript非同步程式設計問題的方式。非同步直白點說就是不按順序執行。而Promise會讓你在非同步程式設計時有一種同步程式設計的感覺,同步就是按照順序一步一步往下執行。

對於Promise,它的API很少,所以你完全可以把這些方法全記住:(Promise是一個物件,就想Array一樣)
例項原型上:.then(),    .catch()  .finally();
物件屬性上:.all(),   .race(),    .resolve(),    .reject();

這些方法除了finally外都會有一個返回值,這個返回值依舊是一個Promise物件,所以我們可以進行鏈式語法

Promise物件有且只有三種狀態:Pending(進行中),Fulfilled(成功),Rejected(失敗)

且狀態一旦改變就一定不會再次改變

建立Promise例項:

var promise = new Promise(function(resolve,reject){
    //somg code
    if(/*非同步操作成功*/){
        resolve(value);
    }else{
        reject(error);
    }

})

      Promise建構函式接受一個函式作為引數,該函式的兩個引數分別是resolve和reject。它們是兩個JavaScript引擎提供的函式,不用我們自己部署。resolve函式的作用就是將Promise物件由Pending狀態改變為Fulfilled狀態,在非同步操作成功時呼叫,並將非同步操作結果作為引數傳遞出去。reject函式的作用就是將Promise物件由Pending狀態改變為Rejected狀態,在非同步操作失敗時呼叫,並將非同步操作結果作為引數傳遞出去。

 

API講解:


Promise.prototype.then():
       該函式在Promise物件從Pending轉換成Fulfilled後被呼叫。它的引數是一個回撥函式,這個回撥函式的引數是在Promise非同步操作成功時傳出的引數(建立例項裡的value);
舉個例子:

new Promise(function(resolve,reject){
    console.log("現在正在一步操作中...");
    resolve("非同步操作成功");
}).then(function(data){
    console.log(data);
})


Promise.prototype.catch():
      該函式在Promise從Pending轉換成Rejected後被呼叫,它的引數也是一個回撥函式,如果非同步操作失敗、丟擲錯誤,catch()指定的回撥函式就會執行,回撥函式的引數就是非同步操作失敗時傳出的資訊。
舉個例子:

new Promise(function(resolve,reject){
    throw new Error("非同步操作失敗");
}).catch(function(error){
    console.log(error);
})


Promise.prototype.finally():
     finally方法用於指定不管Promise物件最後狀態如何都會執行的操作。它接受一個普通的回撥函式作為引數,該函式不管怎樣都必須執行。
舉個例子:

new Promise(function(resolve,reject){
    console.log("非同步操作中");
    resolve();
}).then(function(data){
    console.log("成功");
}).catch(function(){
    console.log("失敗");
}).finally(function(){
    console.log("我最後執行的")
})


Promise.all():
      Promise.all()方法用於將多個Promise例項包裝成一個新的Promise例項。引數是陣列之類的具有Iterator介面,且每個成員都是Promise例項的資料結構。
上一段程式碼:

var P = Promise.all([p1,p2,p3]);

        現在p就是有p1,p2,p3三個Promise例項包裝而成的一個新Promise例項。且p的狀態只有當p1,p2,p3都從Pending變成Fulfilled狀態時,才會是Fulfilled,其他情況都是Rejected
舉個例子:

var promises = [1,2,3].map(item=>{
    return Promise.resolve(item);//下文講解
});
Promise.all(promises).then(function(data){
    console.log(data);
}).catch(function(error){
    console.log(error);
})


Promise.race():
    Promise.race()方法和Promise.all()方法很相近,只有一點不同:當p1,p2,p3中有一個例項的狀態改變,p的狀態就會改變,那個率先改變的Promise例項的返回值就是傳遞給p的回撥函式的引數值


Promise.resolve():
      它的作用就是將現有物件轉變成Promise物件,且轉變成的Promise物件是Fulfilled狀態。現有物件可以是Promise物件也可以普通其他物件。
 

Promise.reject():
      該方法和Promise.resolve()的作用一樣,只不過是轉變成Rejected狀態的Promise物件就這樣簡單總結一下Promise,把這篇文章當做學習Promise的目錄是不錯的選擇。更加詳細的內容請看官自行研究。