ES6中的Promise物件小結
Promise是一種非同步程式設計的解決方案,ES6提供原生的Promise,它比傳統的解決方案,回撥函式和事件,更加合理和強大。
Promise物件有以下兩個特點:
1、物件的狀態不受外界影響。Promise物件代表一個非同步操作,有三種狀態:pending, resolved, rejected。只有非同步操作的結果,可以決定是哪一種狀態。
2、狀態一旦改變,就不會再變化,並且任何時候都可以得到這個結果。
實用Promise物件,可以將非同步操作用同步操作的流程表達出來,避免了層層巢狀的回撥函式。
基本用法
var promise = new Promise(function (resolve, reject) {
// ... some code
if (/* 非同步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
注意,函式resolve, reject由JS引擎提供,不用自己部署。
resolve函式的作用是將Promise物件的狀態從“未完成”變為“成功”(即從 Pending 變為 Resolved),在非同步呼叫成功的時候使用,並將非同步操作的結果作為引數傳遞出去;reject函式將Promise物件的狀態從“未完成”變為“失敗”(即從 Pending 變為 Rejected),在非同步操作失敗時呼叫,並將非同步操作報出的錯誤作為引數傳遞出去。
promise.then(function(value) {
// success
}, function(error) {
// failure
});
Promise例項生成以後,可以用then方法分別指定Resolved狀態和Rejected狀態的回撥函式。
一個完整的例子:
function timeout(ms) {
return new Promise((resolve, reject) => {
setTimeout(resolve, ms, 'done');
});
}
timeout(100).then((value) => {
console .log(value);
});
timeout方法返回一個Promise例項。當Promise例項的狀態變為Resolved,就會觸發then方法繫結的回撥函式。
另外,Promise物件在新建後就會立即執行。
下面是用Promise物件實現Ajax的例子:
var getJSON = function(url) {
var promise = new Promise(function(resolve, reject){
var client = new XMLHttpRequest();
client.open("GET", url);
client.onreadystatechange = handler;
client.responseType = "json";
client.setRequestHeader("Accept", "application/json");
client.send();
function handler() {
if (this.readyState !== 4) {
return;
}
if (this.status === 200) {
resolve(this.response);
} else {
reject(new Error(this.statusText));
}
};
});
return promise;
};
getJSON("/posts.json").then(function(json) {
console.log('Contents: ' + json);
}, function(error) {
console.error('出錯了', error);
});
Promise“巢狀”
如果呼叫resolve函式和reject函式時帶有引數,那麼它們的引數會被傳遞給回撥函式。
reject函式的引數通常是Error物件的例項,表示丟擲的錯誤;resolve函式的引數除了正常的值以外,還可能是另一個 Promise 例項:
var p1 = new Promise(function (resolve, reject) {
// ...
});
var p2 = new Promise(function (resolve, reject) {
// ...
resolve(p1);
})
上面程式碼中,p1和p2都是 Promise 的例項,
但是,重要的來了,p2的resolve方法將p1作為引數,即一個非同步操作的結果是返回另一個非同步操作。
這時,p1的狀態就會傳遞給p2,也就是說,p1的狀態決定了p2的狀態。如果p1的狀態是Pending,那麼p2的回撥函式就會等待p1的狀態改變;如果p1的狀態已經是Resolved或者Rejected,那麼p2的回撥函式將會立刻執行。
注意,呼叫resolve或reject並不會終結 Promise 的引數函式的執行。
new Promise((resolve, reject) => {
resolve(1);
console.log(2);
}).then(r => {
console.log(r);
});
// 2
// 1
Promise.prototype.then()
then方法的作用是為 Promise 例項新增狀態改變時的回撥函式。前面說過,then方法的第一個引數是Resolved狀態的回撥函式,第二個引數(可選)是Rejected狀態的回撥函式。
then方法可以鏈式呼叫。
getJSON("/post/1.json").then(function(post) {
return getJSON(post.commentURL);
}).then(function funcA(comments) {
console.log("Resolved: ", comments);
}, function funcB(err){
console.log("Rejected: ", err);
});
上面程式碼中,第一個then方法指定的回撥函式,返回的是另一個Promise物件。這時,第二個then方法指定的回撥函式,就會等待這個新的Promise物件狀態發生變化。如果變為Resolved,就呼叫funcA,如果狀態變為Rejected,就呼叫funcB。
Promise.prototype.catch()
Promise.prototype.catch方法是.then(null, rejection)的別名,用於指定發生錯誤時的回撥函式。
另外,then方法指定的回撥函式,如果執行中丟擲錯誤,也會被catch方法捕獲。
Promise.resolve()
Promise.resolve()可以將現有物件轉化為Promise物件。
等價於:
Promise.resolve('foo')
// 等價於
new Promise(resolve => resolve('foo'))
Promise.resolve方法的引數分成四種情況。
1、引數是一個Promise例項
如果引數是Promise例項,那麼Promise.resolve將不做任何修改、原封不動地返回這個例項。
2、引數是一個thenable物件
thenable物件指的是具有then方法的物件,比如下面這個物件。
let thenable = {
then: function(resolve, reject) {
resolve(42);
}
};
Promise.resolve方法會將這個物件轉為Promise物件,然後就立即執行thenable物件的then方法。
3、引數不是具有then方法的物件,或根本就不是物件
如果引數是一個原始值,或者是一個不具有then方法的物件,則Promise.resolve方法返回一個新的Promise物件,狀態為Resolved。
var p = Promise.resolve('Hello');
p.then(function (s){
console.log(s)
});
// Hello
4、不帶有任何引數
Promise.resolve方法允許呼叫時不帶引數,直接返回一個Resolved狀態的Promise物件。
所以,如果希望得到一個Promise物件,比較方便的方法就是直接呼叫Promise.resolve方法。
需要注意的是,立即resolve的Promise物件,是在本輪“事件迴圈”(event loop)的結束時,而不是在下一輪“事件迴圈”的開始時。
Promise.reject()
Promise.reject(reason)方法也會返回一個新的 Promise 例項,該例項的狀態為rejected。