ES6原生提供了Promise對象。所謂Promise,就是Node中的一個對象,用來傳遞異步操作的消息。
Promise的特點
- 對象的狀態不受外界影響。Promise對象代表一個異步操作,有三種狀態:Pending、Resolved和Rejected。只有異步操作的結果,可以決定當前是哪一種狀態,任何其他操作都無法改變這個狀態。這也是Promise這個名字的由來,他的英語意思就是【承諾】,表示其他手段無法改變。
- 一旦狀態改變,就不會再變,任何時候都可以得到這個結果。Promise對象的狀態改變,只有兩種可能:從Pending變為Resolved和從Pending變為Rejected。只要這兩種情況發生,狀態就凝固了,不會再變,會一直保持這個結果。就算改變已經發生了,你在對Promise對象添加回調函數,也會立即得到這個結果,這與實踐(Event)完全不同,事件的特點是:如果你錯過了它,再去監聽,是得不到結果的。
Promise簡單例子
創建一個Promise
var promise = new Promise(function (resolve, reject) {
setTimeout(function () {
console.log('執行完成');
resolve('隨便什么數據');
}, 1500)
})
Promise的構造函數接收一個參數,就是一個函數,并傳入兩個參數:resolve、reject,分別表示異步操作執行成功后的回調函數和異步執行失敗后的回調函數。其實這里用“成功”和“失敗”來描述并不準確,按照標準來講,resolve是將Promise的狀態置為fullfiled,reject是將Promise的狀態置為rejected。不過在我們開始階段可以先這么理解,后面再細究概念。
上邊的例子中,我們只是創建了一個Promise的對象,并沒有調用它,然后我們來看下邊的這個完整的例子:
function runAsync () {
var promise = new Promise(function (resolve, reject) {
setTimeout(function () {
console.log('執行完成');
resolve('隨便什么數據');
}, 2000);
});
return promise;
}
runAsync();
這個時候你應該有兩個疑問:1. 包裝這么一個函數有什么用?2. resolve('隨便什么數據');這個是干什么的?
接下來我們繼續講。在我們包裝好的函數最后,會return出Promise對象,也就是說,執行這個函數我們得到了一個Promise對象。還記得Promise對象上有then、catch方法吧。這就是強大之處了,看下邊的代碼:
runAsync().then(function (data) {
console.log(data);
// 后邊可以用傳過來的數據來做一些其他操作
// ......
});
在runAsync()的返回上直接調用then方法,then方法接收一個參數,是函數,并且會拿到我們在runAsync中調用resolve時傳的參數。運行這段代碼,會在兩秒后輸出“執行完成”,“隨便什么數據”。
以上的例子中還不能很好的表現出Promise的強大之處,下面我們開始講解鏈式操作
鏈式操作
首先看一個例子
function runAsync1(){
var promise = new Promise(function(resolve, reject){
//做一些異步操作
setTimeout(function(){
console.log('異步任務1執行完成');
resolve('隨便什么數據1');
}, 1000);
});
return promise;
}
function runAsync2(){
var promise = new Promise(function(resolve, reject){
//做一些異步操作
setTimeout(function(){
console.log('異步任務2執行完成');
resolve('隨便什么數據2');
}, 2000);
});
return promise;
}
function runAsync3(){
var promise = new Promise(function(resolve, reject){
//做一些異步操作
setTimeout(function(){
console.log('異步任務3執行完成');
resolve('隨便什么數據3');
}, 2000);
});
return promise;
}
runAsync1()
.then(function (data) {
console.log(data);
return runAsync2();
})
.then(function (data) {
console.log(data);
return runAsync3();
})
.then(function (data) {
console.log(data);
});
這段代碼運行的結果是:
異步任務1執行完成
隨便什么數據1
異步任務2執行完成
隨便什么數據2
異步任務3執行完成
隨便什么數據3
如果我們來把上班執行的代碼改為這樣:
runAsync1()
.then(function (data) {
console.log(data);
return runAsync2();
})
.then(function (data) {
console.log(data);
return '直接返回數據';
})
.then(function (data) {
console.log(data);
done();
});
這樣執行完的結果就會變成:
異步任務1執行完成
隨便什么數據1
異步任務2執行完成
隨便什么數據2
直接返回數據
這里的原因自己慢慢體會吧!!!
reject的用法
到這里,你應該對Promise有了最基本的了解了。在ES6中除了resolve,還有reject這個功能。?事實上,我們前面的例子中都是只有“執行成功”的回調,還沒有“失敗”的情況,reject的作用就是把Promise的狀態置為rejected,這樣我們在then中就能捕捉到,然后執行“失敗”情況的回調,看下面的代碼:
function getNumber() {
var promise = new Promise(function (resolve, reject) {
setTimeout(function () {
var num = Math.ceil(Math.random() * 10);
if (num < 5) {
resolve(num);
} else {
reject('數字太大了');
}
}, 1000);
});
return promise;
}
getNumber().then(
function (data) {
console.log('resolved');
console.log(data);
},
function (reason, data) {
console.log('rejected');
console.log(reason);
});
getNumber函數用來獲取一個數字,1秒后執行完成,如果數字小于5,我們認為是“成功”了,調用resolve修改Promise的狀態。否則我們就認為是“失敗”了,調用reject并傳遞一個參數,作為失敗的原因。
運行getNumber并且在then中傳了兩個參數,then方法可以接受兩個參數,第一個對應resolve的回調,第二個對應reject的回調。所以我們能夠分別拿到他們傳過來的數據,多次運行這段代碼,你會隨機到下面兩種結果:
resolved
3
或者
rejected
數字太大了
catch的用法
我們知道Promise對象除了then方法,還有一個catch方法,他是做什么用的呢?其實它和then的第二個參數一樣,用來指定reject的回調,用法是這樣的:
getNumber()
.then(function (data) {
console.log('resolved');
console.log(data);
})
.catch(function (reason) {
console.log('rejected');
console.log(reason);
})
效果和寫在then的第二個參數里邊是一樣的。不過它還有另一個作用:在執行resolve的回調(也就是上面then中的第一個參數)時,如果拋出異常(代碼出錯),那么并不會報錯卡死js,而是進到這個catch方法中。請看下面的代碼:
getNumber()
.then(function(data){
console.log('resolved');
console.log(data);
console.log(somedata); //此處的somedata未定義
})
.catch(function(reason){
console.log('rejected');
console.log(reason);
});
在resolve的回調中,我們console.log(somedata);而somedata這個變量是沒有被定義的。如果我們不用Promise,代碼運行到這里就直接在控制臺報錯了,不往下運行了。但是這里,我們會得到這樣的結果:
resolved
4
rejected
[ReferenceError: somedata is not defined]
all的用法
Promise的all方法提供了并行執行異步操作的能力,并且在所有異步操作執行完后才執行回調。我們仍舊使用上面定義好的runAsync1、runAsync2、runAsync3這三個函數,看下面的例子:
Promise
.all([runAsync1(), runAsync2(), runAsync3()])
.then(function (results) {
console.log(results);
});
會打印:
異步任務1執行完成
異步任務2執行完成
異步任務3執行完成
[ '隨便什么數據1', '隨便什么數據2', '隨便什么數據3' ]
有了all,你就可以并行執行多個異步操作,并且在一個回調中處理所有返回數據,是不是很酷?有一個場景是很適合用這個的,一些游戲類的素材比較多的應用,打開網頁時,預先加載需要用到的各種資源,比如圖片、flash以及各種靜態文件。所有的都加載完后,我們進行頁面的初始化。
race的用法
all方法的效果實際上是【誰跑得慢,以誰為準執行回調】,那么相對的就有另一個方法【誰跑的快,以誰為準執行回調】,這就是race方法,這個詞本來就是賽跑的意思。race的用法與all一樣,我們把上面runAsync()的延時改為1秒來看一下:
Promise
.race([runAsync1(), runAsync2(), runAsync3()])
.then(function (results) {
console.log(results);
});
這個異步操作同樣是并行執行的。1秒后runAsync已經執行完了,此時then里面的就執行了。結果是這樣的:
異步任務1執行完成
隨便什么數據1
異步任務2執行完成
異步任務3執行完成
這個時候runAsync2()和runAsync3()并沒有停止,仍舊再執行。于是再過1秒后,輸出了他們結束的標志。