技術共享 | 10點說明白ECMAScript 6的Promise函數

(1)Promise 含義

Promise 是非同步編程的一種解決方案,是一個對象,從它可以獲取非同步操作的消息。簡單說就是一個容器,裡面保存著某個未來才會結束的事件的結果。

Promise對象有以下兩個特點:

(1)對象的狀態不受外界影響。有三種狀態:pending(進行中)、fulfilled(已成功)和rejected(已失敗)。只有非同步操作的結果,可以決定當前是哪一種狀態,任何其他操作都無法改變這個狀態。 (2)一旦狀態改變,就不會再變,任何時候都可以得到這個結果。Promise對象的狀態改變,只有兩種可能:從pending變為fulfilled和從pending變為rejected。

Promise缺點:

(1)無法取消Promise,一旦新建它就會立即執行,無法中途取消。 (2)如果不設置回調函數,Promise內部拋出的錯誤,不會反應到外部。 (3)當處於pending狀態時,無法得知目前進展到哪一個階段(剛剛開始還是即將完成)。

注意:後面的resolved統一隻指fulfilled狀態,不包含rejected狀態。

(2)基本用法

ES6 規定,Promise對象是一個構造函數,用來生成Promise實例。

var promise = new Promise(function(resolve, reject) {

// ... some code

if (/* 非同步操作成功 */){

resolve(value);

} else {

reject(error);

}

});

Promise構造函數接受一個函數作為參數,該函數的兩個參數分別是resolve和reject。是兩個函數,由 JavaScript 引擎提供,不用自己部署。

resolve函數的作用是,將Promise對象的狀態從「未完成」變為「成功」(即從 pending 變為 resolved),在非同步操作成功時調用,並將非同步操作的結果,作為參數傳遞出去; reject函數的作用是,將Promise對象的狀態從「未完成」變為「失敗」(即從 pending 變為 rejected),在非同步操作失敗時調用,並將非同步操作報出的錯誤,作為參數傳遞出去。

Promise實例生成以後,可以用then方法分別指定resolved狀態和rejected狀態的回調函數,rejected函數是可選的,不一定要提供,兩個函數都接受Promise對象傳出的值作為參數。

promise.then(function(value) {

// success

}, function(error) {

// failure

});

注意,調用resolve或reject並不會終結 Promise 的參數函數的執行。

new Promise((resolve, reject) => {

resolve(1);

console.log(2);

}).then(r => {

console.log(r);

});

// 2

// 1

上面代碼中,調用resolve(1)以後,後面的console.log(2)還是會執行,並且會首先列印出來。這是因為立即 resolved 的 Promise 是在本輪事件循環的末尾執行,總是晚於本輪循環的同步任務。

調用resolve或reject以後,Promise 的使命就完成了,後繼操作應該放到then方法裡面,而不應該直接寫在resolve或reject的後面。所以,最好在它們前面加上return語句,這樣就不會有意外。 new Promise((resolve, reject) => { return resolve(1); // 後面的語句不會執行

console.log(2); })

(3)Promise.prototype.then()

Promise 實例具有then方法,也就是說,then方法是定義在原型對象Promise.prototype上的。它的作用是為 Promise 實例添加狀態改變時的回調函數。

then方法返回的是一個新的Promise實例(注意,不是原來那個Promise實例)。因此可以採用鏈式寫法,即then方法後面再調用另一個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。

(4)Promise.prototype.catch()

Promise.prototype.catch方法是.then(null, rejection)的別名,用於指定發生錯誤時的回調函數。

getJSON('/posts.json').then(function(posts) {

// ...

}).catch(function(error) {

// 處理 getJSON 和 前一個回調函數運行時發生的錯誤

console.log('發生錯誤!', error);

});

上面代碼中,getJSON方法返回一個 Promise 對象,如果該對象狀態變為resolved,則會調用then方法指定的回調函數;如果非同步操作拋出錯誤,狀態就會變為rejected,就會調用catch方法指定的回調函數,處理這個錯誤。另外,then方法指定的回調函數,如果運行中拋出錯誤,也會被catch方法捕獲。

如果Promise狀態已經變成resolved,再拋出錯誤是無效的。

var promise = new Promise(function(resolve, reject) {

resolve('ok');

throw new Error('test');

});

promise

.then(function(value) { console.log(value) })

.catch(function(error) { console.log(error) });

// ok

Promise 對象的錯誤具有「冒泡」性質,會一直向後傳遞,直到被捕獲為止。也就是說,錯誤總是會被下一個catch語句捕獲。

getJSON('/post/1.json').then(function(post) {

return getJSON(post.commentURL);

}).then(function(comments) {

// some code

}).catch(function(error) {

// 處理前面三個Promise產生的錯誤

});

上面代碼中,一共有三個Promise對象:一個由getJSON產生,兩個由then產生。它們之中任何一個拋出的錯誤,都會被最後一個catch捕獲。

不要在then方法裡面定義Reject狀態的回調函數(即then的第二個參數),總是使用catch方法。

// bad

promise

.then(function(data) {

// success

}, function(err) {

// error

});

// good

promise

.then(function(data) { //cb

// success

}).catch(function(err) {

// error

});

上面代碼中,第二種寫法要好於第一種寫法,理由是第二種寫法可以捕獲前面then方法執行中的錯誤,也更接近同步的寫法(try/catch)。因此,建議總是使用catch方法,而不使用then方法的第二個參數。

跟傳統的try/catch代碼塊不同的是,如果沒有使用catch方法指定錯誤處理的回調函數,Promise 對象拋出的錯誤不會傳遞到外層代碼,即不會有任何反應。

const someAsyncThing = function() {

return new Promise(function(resolve, reject) {

// 下面一行會報錯,因為x沒有聲明

resolve(x + 2);

});

};

someAsyncThing().then(function() {

console.log('everything is great');

});

setTimeout(() => { console.log(123) }, 2000);

// Uncaught (in promise) ReferenceError: x is not defined

// 123

上面代碼中,someAsyncThing函數產生的 Promise 對象,內部有語法錯誤。瀏覽器運行到這一行,會列印出錯誤提示ReferenceError: x is not defined,但是不會退出進程、終止腳本執行,2秒之後還是會輸出123。這就是說,Promise 內部的錯誤不會影響到 Promise 外部的代碼,通俗的說法就是「Promise 會吃掉錯誤」。

(5)Promise.all()

Promise.all方法用於將多個 Promise 實例,包裝成一個新的 Promise 實例。 Promise.all方法的參數可以不是數組,但必須具有 Iterator 介面,且返回的每個成員都是 Promise 實例。

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

p的狀態由p1、p2、p3決定,分成兩種情況:

(1)只有p1、p2、p3的狀態都變成fulfilled,p的狀態才會變成fulfilled,此時p1、p2、p3的返回值組成一個數組,傳遞給p的回調函數。

(2)只要p1、p2、p3之中有一個被rejected,p的狀態就變成rejected,此時第一個被reject的實例的返回值,會傳遞給p的回調函數。

// 生成一個Promise對象的數組

var promises = [2, 3, 5, 7, 11, 13].map(function (id) {

return getJSON('/post/' + id + ".json");

});

Promise.all(promises).then(function (posts) {

// ...

}).catch(function(reason){

// ...

});

上面代碼中,promises是包含6個 Promise 實例的數組,只有這6個實例的狀態都變成fulfilled,或者其中有一個變為rejected,才會調用Promise.all方法後面的回調函數。

注意:如果作為參數的 Promise 實例,自己定義了catch方法,那麼它一旦被rejected,並不會觸發Promise.all()的catch方法。

const p1 = new Promise((resolve, reject) => {

resolve('hello');

})

.then(result => result)

.catch(e => e);

const p2 = new Promise((resolve, reject) => {

throw new Error('報錯了');

})

.then(result => result)

.catch(e => e);

Promise.all([p1, p2])

.then(result => console.log(result))

.catch(e => console.log(e));

// ["hello", Error: 報錯了]

上面代碼中,p1會resolved,p2首先會rejected,但是p2有自己的catch方法,該方法返回的是一個新的 Promise 實例,p2指向的實際上是這個實例。該實例執行完catch方法後,也會變成resolved,導致Promise.all()方法參數裡面的兩個實例都會resolved,因此會調用then方法指定的回調函數,而不會調用catch方法指定的回調函數。

(6)Promise.race()

Promise.race方法同樣是將多個Promise實例,包裝成一個新的Promise實例。

var p = Promise.race([p1, p2, p3]);

上面代碼中,只要p1、p2、p3之中有一個實例率先改變狀態,p的狀態就跟著改變。那個率先改變的 Promise 實例的返回值,就傳遞給p的回調函數。

const p = Promise.race([

fetch('/resource-that-may-take-a-while'),

new Promise(function (resolve, reject) {

setTimeout(() => reject(new Error('request timeout')), 5000)

})

]);

p.then(response => console.log(response));

p.catch(error => console.log(error));

上面代碼中,如果5秒之內fetch方法無法返回結果,變數p的狀態就會變為rejected,從而觸發catch方法指定的回調函數。

(7)Promise.resolve()

有時需要將現有對象轉為Promise對象,Promise.resolve方法就起到這個作用。

var jsPromise = Promise.resolve($.ajax('/whatever.json'));

Promise.resolve方法的參數分成四種情況:

(1)參數是一個Promise實例 如果參數是Promise實例,那麼Promise.resolve將不做任何修改、原封不動地返回這個實例。

(2)參數是一個thenable對象 thenable對象指的是具有then方法的對象,比如下面這個對象。

let thenable = {

then: function(resolve, reject) {

resolve(42);

}

};

let p1 = Promise.resolve(thenable);

p1.then(function(value) {

console.log(value); // 42

});

Promise.resolve方法會將這個對象轉為Promise對象,然後就立即執行thenable對象的then方法。then方法執行後,對象p1的狀態就變為resolved,從而立即執行最後那個then方法指定的回調函數,輸出42。

(3)參數不是具有then方法的對象,或根本就不是對象 如果參數是一個原始值,或者是一個不具有then方法的對象,則Promise.resolve方法返回一個新的Promise對象,狀態為resolved。

let thenable = {

then: function(resolve, reject) {

resolve(42);

}

};

let p1 = Promise.resolve(thenable);

p1.then(function(value) {

console.log(value); // 42

});

上面代碼生成一個新的Promise對象的實例p。由於字元串Hello不屬於非同步操作(判斷方法是字元串對象不具有then方法),返回Promise實例的狀態從一生成就是resolved,所以回調函數會立即執行。Promise.resolve方法的參數,會同時傳給回調函數。 (4)不帶有任何參數 Promise.resolve方法允許調用時不帶參數,直接返回一個resolved狀態的Promise對象。 所以,如果希望得到一個Promise對象,比較方便的方法就是直接調用Promise.resolve方法。

var p = Promise.resolve();

p.then(function () {

// ...

});

上面代碼的變數p就是一個Promise對象。

注意:立即resolve的Promise對象,是在本輪「事件循環」(event loop)的結束時,而不是在下一輪「事件循環」的開始時。

setTimeout(function () {

console.log('three');

}, 0);

Promise.resolve().then(function () {

console.log('two');

});

console.log('one');

// one

// two

// three

上面代碼中,setTimeout(fn, 0)在下一輪「事件循環」開始時執行,Promise.resolve()在本輪「事件循環」結束時執行,console.log('one')則是立即執行,因此最先輸出。

(8)Promise.reject()

Promise.reject(reason)方法也會返回一個新的 Promise 實例,該實例的狀態為rejected。

var p = Promise.reject('出錯了');

// 等同於

var p = new Promise((resolve, reject) => reject('出錯了'))

p.then(null, function (s) {

console.log(s)

});

// 出錯了

注意:Promise.reject()方法的參數,會原封不動地作為reject的理由,變成後續方法的參數。這一點與Promise.resolve方法不一致。

const thenable = {

then(resolve, reject) {

reject('出錯了');

}

};

Promise.reject(thenable).catch(e => {

console.log(e === thenable)

})

// true

上面代碼中,Promise.reject方法的參數是一個thenable對象,執行以後,後面catch方法的參數不是reject拋出的「出錯了」這個字元串,而是thenable對象。

(9)兩個有用的附加方法

done()

Promise對象的回調鏈,不管以then方法或catch方法結尾,要是最後一個方法拋出錯誤,都有可能無法捕捉到(因為Promise內部的錯誤不會冒泡到全局)。因此,我們可以提供一個done方法,總是處於回調鏈的尾端,保證拋出任何可能出現的錯誤。

asyncFunc()

.then(f1)

.catch(r1)

.then(f2)

.done();

// done的實現代碼

Promise.prototype.done = function (onFulfilled, onRejected) {

this.then(onFulfilled, onRejected)

.catch(function (reason) {

// 拋出一個全局錯誤

setTimeout(() => { throw reason }, 0);

});

};

finally()

finally方法用於指定不管Promise對象最後狀態如何,都會執行的操作。它與done方法的最大區別,它接受一個普通的回調函數作為參數,該函數不管怎樣都必須執行。

server.listen(0)

.then(function () {

// run test

}).finally(server.stop);

(10)Promise.try()

由於Promise.try為所有操作提供了統一的處理機制,所以如果想用then方法管理流程,最好都用Promise.try包裝一下,可以更好地管理異常。

const f = () => console.log('now');

Promise.try(f);

console.log('next');

// now

// next

Promise.try(database.users.get({id: userId}))

.then(...)

.catch(...)

事實上,Promise.try就是模擬try代碼塊,就像promise.catch模擬的是catch代碼塊。