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的目錄是不錯的選擇。更加詳細的內容請看官自行研究。