ES6之Promise 物件
- 含義
Promise是非同步程式設計的一種解決方案,比回撥函式和事件這兩個傳統的解決方案更合理更強大。
是一個容器,存放著某個未來才會結束的事件(通常是一個非同步操作)結果。從語義上說,Promise是一個物件,可以獲取非同步操作的資訊。提供統一的API,各種非同步操作都可以同樣的方法進行處理。
Promise物件有兩個特點:
(1)物件的狀態不受外界的影響。Promise物件代表一個非同步操作,有三種狀態:pending(進行中)、fulfilled(已成功)和rejected(已失敗)。只有非同步操作的結果,可以決定當前是哪一種狀態,任何其他操作都無法改變這個狀態。
(2)一旦狀態改變,就不會在變,任何時候都可以得到這個結果。Promise物件的狀態改變,只有兩種可能:從pending變為fulfilled和從pending變為rejected。只要這兩種情況發生,狀態就凝固了,不會再變了,會一直保持這個結果,這時就稱為 resolved(已定型)。如果改變已經發生了,你再對Promise物件添加回調函式,也會立即得到這個結果。這與事件(Event)完全不同,事件的特點是,如果你錯過了它,再去監聽,是得不到結果的。
以後常說的resolved統一隻指fulfilled狀態,不包含rejected狀態。
有了Promise物件,就可以將非同步操作以同步操作的流程表達出來,避免了層層巢狀的回撥函式。此外,Promise物件提供統一的介面,使得控制非同步操作更加容易。
缺點:
a,無法取消Promise,一旦新建它就會立即執行,無法中途取消。
b,如果不設定回撥函式,Promise內部丟擲的錯誤,不會反應到外部。
c,當處於pending狀態時,無法得知目前進展到哪一個階段(剛剛開始還是即將完成)。
- 基本用法
ES6 規定,Promise物件是一個建構函式,用來生成Promise例項。
const 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狀態的回撥函式。
promise.then(function(value) {
// success
}, function(error) {
// failure
});
then方法可以接受兩個回撥函式作為引數。第一個回撥函式是Promise物件的狀態變為resolved時呼叫,第二個回撥函式是Promise物件的狀態變為rejected時呼叫。其中,第二個函式是可選的,不一定要提供。這兩個函式都接受Promise物件傳出的值作為引數。
如果呼叫resolve函式和reject函式時帶有引數,那麼它們的引數會被傳遞給回撥函式。reject函式的引數通常是Error物件的例項,表示丟擲的錯誤;resolve函式的引數除了正常的值以外,還可能是另一個 Promise 例項,比如像下面這樣。
const p1 = new Promise(function (resolve, reject) {
// ...
});
const 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的回撥函式將會立刻執行。
const p1 = new Promise(function (resolve, reject) {
setTimeout(() => reject(new Error('fail')), 3000)
})
const p2 = new Promise(function (resolve, reject) {
setTimeout(() => resolve(p1), 1000)
})
p2
.then(result => console.log(result))
.catch(error => console.log(error))
// Error: fail
p1是一個 Promise,3 秒之後變為rejected。p2的狀態在 1 秒之後改變,resolve方法返回的是p1。由於p2返回的是另一個 Promise,導致p2自己的狀態無效了,由p1的狀態決定p2的狀態。所以,後面的then語句都變成針對後者(p1)。又過了 2 秒,p1變為rejected,導致觸發catch方法指定的回撥函式。
注意,呼叫resolve或reject並不會終結 Promise 的引數函式的執行。
一般來說,呼叫resolve或reject以後,Promise 的使命就完成了,後繼操作應該放到then方法裡面,而不應該直接寫在resolve或reject的後面。所以,最好在它們前面加上return語句,這樣就不會有意外。
new Promise((resolve, reject) => {
resolve(1);
console.log(2);
}).then(r => {
console.log(r);
});
// 2
// 1
// 加return
new Promise((resolve, reject) => {
return resolve(1);
// 後面的語句不會執行
console.log(2);
})
- promise例項的then方法
then方法是定義在原型物件Promise.prototype上的。它的作用是為 Promise 例項新增狀態改變時的回撥函式。前面說過,then方法的第一個引數是resolved狀態的回撥函式,第二個引數(可選)是rejected狀態的回撥函式。
then方法返回的是一個新的Promise例項(注意,不是原來那個Promise例項)。因此可以採用鏈式寫法,即then方法後面再呼叫另一個then方法。
getJSON("/posts.json").then(function(json) {
return json.post;
}).then(function(post) {
// ...
});
上面的程式碼使用then方法,依次指定了兩個回撥函式。第一個回撥函式完成以後,會將返回結果作為引數,傳入第二個回撥函式。
採用鏈式的then,可以指定一組按照次序呼叫的回撥函式。這時,前一個回撥函式,有可能返回的還是一個Promise物件(即有非同步操作),這時後一個回撥函式,就會等待該Promise物件的狀態發生變化,才會被呼叫。
-
Promise.prototype.catch()
Promise.prototype.catch方法是.then(null, rejection)的別名,用於指定發生錯誤時的回撥函式。
Promise 物件的錯誤具有“冒泡”性質,會一直向後傳遞,直到被捕獲為止。也就是說,錯誤總是會被下一個catch語句捕獲。一般來說,不要在then方法裡面定義 Reject 狀態的回撥函式(即then的第二個引數),總是使用catch方法。
跟傳統的try/catch程式碼塊不同的是,如果沒有使用catch方法指定錯誤處理的回撥函式,Promise 物件丟擲的錯誤不會傳遞到外層程式碼,即不會有任何反應。一般總是建議,Promise 物件後面要跟catch方法,這樣可以處理 Promise 內部發生的錯誤。catch方法返回的還是一個 Promise 物件,因此後面還可以接著呼叫then方法。
-
Promise.prototype.finally()
finally方法用於指定不管 Promise 物件最後狀態如何,都會執行的操作。該方法是 ES2018 引入標準的。promise .then(result => {···}) .catch(error => {···}) .finally(() => {···}); 上面程式碼中,不管promise最後的狀態,在執行完then或catch指定的回撥函式以後,都會執行finally方法指定的回撥函式。
finally方法的回撥函式不接受任何引數,這意味著沒有辦法知道,前面的 Promise 狀態到底是fulfilled還是rejected。這表明,finally方法裡面的操作,應該是與狀態無關的,不依賴於 Promise 的執行結果。finally本質上是then方法的特例。
promise
.finally(() => {
// 語句
});
// 等同於
promise
.then(
result => {
// 語句
return result;
},
error => {
// 語句
throw error;
}
);
上面程式碼中,如果不使用finally方法,同樣的語句需要為成功和失敗兩種情況各寫一次。有了finally方法,則只需要寫一次。
- Promise.all()
Promise.all方法用於將多個 Promise 例項,包裝成一個新的 Promise 例項。
const p = Promise.all([p1, p2, p3]);
上面程式碼中,Promise.all方法接受一個數組作為引數,p1、p2、p3都是 Promise 例項,如果不是,就會先呼叫下面講到的Promise.resolve方法,將引數轉為 Promise 例項,再進一步處理。(Promise.all方法的引數可以不是陣列,但必須具有 Iterator 介面,且返回的每個成員都是 Promise 例項。)
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.race()
Promise.race方法同樣是將多個 Promise 例項,包裝成一個新的 Promise 例項。
const p = Promise.race([p1, p2, p3]);
上面程式碼中,只要p1、p2、p3之中有一個例項率先改變狀態,p的狀態就跟著改變。那個率先改變的 Promise 例項的返回值,就傳遞給p的回撥函式。
Promise.race方法的引數與Promise.all方法一樣,如果不是 Promise 例項,就會先呼叫下面講到的Promise.resolve方法,將引數轉為 Promise 例項,再進一步處理。
-
Promise.resolve()
Promise.resolve方法作用就是有時需要將現有物件轉為 Promise 物件。Promise.resolve方法的引數分成四種情況。
(1)引數是一個 Promise 例項
如果引數是 Promise 例項,那麼Promise.resolve將不做任何修改、原封不動地返回這個例項。
(2)引數是一個thenable物件(thenable物件指的是具有then方法的物件)
Promise.resolve方法會將這個物件轉為 Promise 物件,然後就立即執行thenable物件的then方法。
(3)引數不是具有then方法的物件,或根本就不是物件
如果引數是一個原始值,或者是一個不具有then方法的物件,則Promise.resolve方法返回一個新的 Promise 物件,狀態為resolved。
(4)不帶有任何引數
Promise.resolve方法允許呼叫時不帶引數,直接返回一個resolved狀態的 Promise 物件。
所以,如果希望得到一個 Promise 物件,比較方便的方法就是直接呼叫Promise.resolve方法。 -
Promise.reject()
Promise.reject(reason)方法也會返回一個狀態為rejected的新的 Promise 例項。
注意,Promise.reject()方法的引數,會原封不動地作為reject的理由,變成後續方法的引數。這一點與Promise.resolve方法不一致。 -
應用
(1)載入圖片
我們可以將圖片的載入寫成一個Promise,一旦載入完成,Promise的狀態就發生變化。
const preloadImage = function (path) {
return new Promise(function (resolve, reject) {
const image = new Image();
image.onload = resolve;
image.onerror = reject;
image.src = path;
});
};
(2)Generator 函式與 Promise 的結合
//使用 Generator 函式管理流程,遇到非同步操作的時候,通常返回一個Promise物件。
function getFoo () {
return new Promise(function (resolve, reject){
resolve('foo');
});
}
const g = function* () {
try {
const foo = yield getFoo();
console.log(foo);
} catch (e) {
console.log(e);
}
};
function run (generator) {
const it = generator();
function go(result) {
if (result.done) return result.value;
return result.value.then(function (value) {
return go(it.next(value));
}, function (error) {
return go(it.throw(error));
});
}
go(it.next());
}
run(g);
//上面程式碼的 Generator 函式g之中,有一個非同步操作getFoo,它返回的就是一個Promise物件。函式run用來處理這個Promise物件,並呼叫下一個next方法。
- Promise.try()
實際開發中,經常遇到一種情況:不知道或者不想區分,函式f是同步函式還是非同步操作,但是想用 Promise 來處理它。因為這樣就可以不管f是否包含非同步操作,都用then方法指定下一步流程,用catch方法處理f丟擲的錯誤。
async函式 或者 new Promise() 可以讓同步函式同步執行,非同步函式非同步執行。
const f = () => console.log('now');
(async () => f())();
console.log('next');
// now
// next
上面程式碼中,第二行是一個立即執行的匿名函式,會立即執行裡面的async函式,因此如果f是同步的,就會得到同步的結果;如果f是非同步的,就可以用then指定下一步,就像下面的寫法。
(async () => f())()
.then(...)
需要注意的是,async () => f()會吃掉f()丟擲的錯誤。所以,如果想捕獲錯誤,要使用promise.catch方法。
(async () => f())()
.then(...)
.catch(...)
const f = () => console.log('now');
(
() => new Promise(
resolve => resolve(f())
)
)();
console.log('next');
// now
// next
由於Promise.try為所有操作提供了統一的處理機制,所以如果想用then方法管理流程,最好都用Promise.try包裝一下。這樣有許多好處,其中一點就是可以更好地管理異常。
try {
database.users.get({id: userId})
.then(...)
.catch(...)
} catch (e) {
// ...
}
上面這樣的寫法就很笨拙了,這時就可以統一用promise.catch()捕獲所有同步和非同步的錯誤。
Promise.try(database.users.get({id: userId}))
.then(...)
.catch(...)
事實上,Promise.try就是模擬try程式碼塊,就像promise.catch模擬的是catch程式碼塊。