注:此篇文章是我參考阮一峰老師的[ECMAScript 6 入門]文章,自己記錄的筆記,詳細的內(nèi)容請移步阮一峰老師的文章。
1. Promise
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 是異步編程的一種解決方案。所謂的Promise,簡單說就是一個容器,里面保存著某個未來才會結(jié)束的事件(通常是異步操作)的結(jié)果。
- 從語法來說,Promise是一個對象,從它可以獲取異步操作的消息。
- Promise對象有以下兩個特點。
(1) 對象的狀態(tài)受外界影響。Promise對象代表一個異步操作,有三種狀態(tài):Pending(進行中)、Fulfilled(已成功)和Rejected(已失敗)。只有異步操作的結(jié)果,可以決定當前是哪一種狀態(tài)
(2) 一旦狀態(tài)改變,就不會再變,任何時候都可以得到這個結(jié)果。Promise對象的狀態(tài)改變,只有兩種可能:從Pending變?yōu)?code>Fulfiled和從Pending變?yōu)?code>Rejected。只要這兩種情況發(fā)生,狀態(tài)就凝固了,不會再變了,會一直保持這個結(jié)果,這時就稱為 Resolved(已定型)。如果改變已經(jīng)發(fā)生了,你再對Promise對象添加回調(diào)函數(shù),也會立即得到這個結(jié)果。這與事件(Event)完全不同,事件的特點是,如果你錯過了它,再去監(jiān)聽,是得不到結(jié)果的。 - 基本用法
ES6 規(guī)定,Promise對象是一個構(gòu)造函數(shù),用來生成Promise實例。
下面代碼創(chuàng)造了一個Promise實例。
var promise = new Promise(function(resolve, reject) {
// ... some code
if (/* 異步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
Promise構(gòu)造函數(shù)接受一個函數(shù)作為參數(shù),該函數(shù)的兩個參數(shù)分別是resolve和reject。它們是兩個函數(shù),由 JavaScript 引擎提供,不用自己部署。
resolve函數(shù)的作用是,將Promise對象的狀態(tài)從“未完成”變?yōu)椤俺晒Α保磸?Pending 變?yōu)?Resolved),在異步操作成功時調(diào)用,并將異步操作的結(jié)果,作為參數(shù)傳遞出去;
reject函數(shù)的作用是,將Promise對象的狀態(tài)從“未完成”變?yōu)椤笆 保磸?Pending 變?yōu)?Rejected),在異步操作失敗時調(diào)用,并將異步操作報出的錯誤,作為參數(shù)傳遞出去。
Promise實例生成以后,可以用then方法分別指定Resolved狀態(tài)和Rejected狀態(tài)的回調(diào)函數(shù)。
promise.then(function(value) {
// success
}, function(error) {
// failure
});
then方法可以接受兩個回調(diào)函數(shù)作為參數(shù)。第一個回調(diào)函數(shù)是Promise對象的狀態(tài)變?yōu)镽esolved時調(diào)用,第二個回調(diào)函數(shù)是Promise對象的狀態(tài)變?yōu)镽ejected時調(diào)用。其中,第二個函數(shù)是可選的,不一定要提供。這兩個函數(shù)都接受Promise對象傳出的值作為參數(shù)。
Promise 新建后就會立即執(zhí)行。
let promise = new Promise(function(resolve, reject) {
console.log('Promise');
resolve();
});
promise.then(function() {
console.log('Resolved.');
});
console.log('Hi!');
// Promise
// Hi!
// Resolved
- Promise.prototype.then()
Promise 實例具有then方法,也就是說,then方法是定義在原型對象Promise.prototype上的。它的作用是為 Promise 實例添加狀態(tài)改變時的回調(diào)函數(shù)。前面說過,then方法的第一個參數(shù)是Resolved狀態(tài)的回調(diào)函數(shù),第二個參數(shù)(可選)是Rejected狀態(tài)的回調(diào)函數(shù)。
then方法返回的是一個新的Promise實例(注意,不是原來那個Promise實例)。因此可以采用鏈式寫法,即then方法后面再調(diào)用另一個then方法。
采用鏈式的then,可以指定一組按照次序調(diào)用的回調(diào)函數(shù)。這時,前一個回調(diào)函數(shù),有可能返回的還是一個Promise對象(即有異步操作),這時后一個回調(diào)函數(shù),就會等待該Promise對象的狀態(tài)發(fā)生變化,才會被調(diào)用。
getJSON("/post/1.json").then(
post => getJSON(post.commentURL)
).then(
comments => console.log("Resolved: ", comments),
err => console.log("Rejected: ", err)
);
上面代碼中,第一個then方法指定的回調(diào)函數(shù),返回的是另一個Promise對象。這時,第二個then方法指定的回調(diào)函數(shù),就會等待這個新的Promise對象狀態(tài)發(fā)生變化。如果變?yōu)镽esolved,就調(diào)用funcA,如果狀態(tài)變?yōu)镽ejected,就調(diào)用funcB。
- Promise.prototype.catch()
getJSON('/posts.json').then(function(posts) {
// ...
}).catch(function(error) {
// 處理 getJSON 和 前一個回調(diào)函數(shù)運行時發(fā)生的錯誤
console.log('發(fā)生錯誤!', error);
});
上面代碼中,getJSON方法返回一個 Promise 對象,如果該對象狀態(tài)變?yōu)镽esolved,則會調(diào)用then方法指定的回調(diào)函數(shù);如果異步操作拋出錯誤,狀態(tài)就會變?yōu)镽ejected,就會調(diào)用catch方法指定的回調(diào)函數(shù),處理這個錯誤。另外,then方法指定的回調(diào)函數(shù),如果運行中拋出錯誤,也會被catch方法捕獲。
Promise 對象的錯誤具有“冒泡”性質(zhì),會一直向后傳遞,直到被捕獲為止。也就是說,錯誤總是會被下一個catch語句捕獲。
getJSON('/post/1.json').then(function(post) {
return getJSON(post.commentURL);
}).then(function(comments) {
// some code
}).catch(function(error) {
// 處理前面三個Promise產(chǎn)生的錯誤
});
上面代碼中,一共有三個Promise對象:一個由getJSON產(chǎn)生,兩個由then產(chǎn)生。它們之中任何一個拋出的錯誤,都會被最后一個catch捕獲。
一般來說,不要在then方法里面定義Reject狀態(tài)的回調(diào)函數(shù)(即then的第二個參數(shù)),總是使用catch方法。
- Promise.all()
方法用于將多個 Promise 實例,包裝成一個新的 Promise 實例。
var p = Promise.all([p1, p2, p3]);
上面代碼中,Promise.all方法接受一個數(shù)組作為參數(shù),p1、p2、p3
都是 Promise 實例,如果不是,就會先調(diào)用下面講Promise.resolve方法,將參數(shù)轉(zhuǎn)為 Promise 實例,再進一步處理。(Promise.all方法的參數(shù)可以不是數(shù)組,但必須具有 Iterator 接口,且返回的每個成員都是 Promise 實例。)
p的狀態(tài)由p1、p2、p3決定,分成兩種情況。
(1) 只有p1、p2、p3的狀態(tài)都變成fulfilled,p的狀態(tài)才會變fulfilled,此時p1、p2、p3的返回值組成一個數(shù)組,傳遞給p的回調(diào)函數(shù)。
(2) 只要p1、p2、p3之中有一個被rejected,p的狀態(tài)就變成rejected,此時第一個被reject的實例的返回值,會傳遞給p的回調(diào)函數(shù)。
注意,如果作為參數(shù)的 Promise 實例,自己定義了catch方法,那么它一旦被rejected,并不會觸發(fā)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指向的實際上是這個實例。該實例執(zhí)行完catch方法后,也會變成resolved,導(dǎo)致Promise.all()方法參數(shù)里面的兩個實例都會resolved,因此會調(diào)用then方法指定的回調(diào)函數(shù),而不會調(diào)用catch方法指定的回調(diào)函數(shù)。
如果p2沒有自己的catch方法,就會調(diào)用Promise.all()的catch方法。
const p1 = new Promise((resolve, reject) => {
resolve('hello');
})
.then(result => result);
const p2 = new Promise((resolve, reject) => {
throw new Error('報錯了');
})
.then(result => result);
Promise.all([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
// Error: 報錯了
注意 :
catch方法返回一個新的promise對象
- Promise.race()
Promise.race方法同樣是將多個Promise實例,包裝成一個新的Promise實例。
var p = Promise.race([p1, p2, p3]);
上面代碼中,只要p1、p2、p3之中有一個實例率先改變狀態(tài),p的狀態(tài)就跟著改變。那個率先改變的 Promise 實例的返回值,就傳遞給p的回調(diào)函數(shù)。
- Promise.resolve()
有時需要將現(xiàn)有對象轉(zhuǎn)為Promise對象,Promise.resolve方法就起到這個作用。
var jsPromise = Promise.resolve($.ajax('/whatever.json'));
上面代碼將jQuery生成的deferred對象,轉(zhuǎn)為一個新的Promise對象。
Promise.resolve等價于下面的寫法。
Promise.resolve('foo')
// 等價于
new Promise(resolve => resolve('foo'))
Promise.resolve方法的參數(shù)分成四種情況。
(1) 參數(shù)是一個Promise實例
如果參數(shù)是Promise實例,那么Promise.resolve將不做任何修改、原封不動地返回這個實例。
var p = new Promise((resolve,reject)=>{
var a= 10;
resolve(a)
});
p.then(res=>console.log(res));
var p1=Promise.resolve(p);
p1.then(res=>console.log(res))
(2) 參數(shù)是一個thenable對象
thenable對象指的是具有then方法的對象,比如下面這個對象。
let thenable = {
then: function(resolve, reject) {
resolve(42);
}
};
Promise.resolve方法會將這個對象轉(zhuǎn)為Promise對象,然后就立即執(zhí)行thenable對象的then方法。
let thenable = {
then: function(resolve, reject) {
resolve(42);
}
};
let p1 = Promise.resolve(thenable);
p1.then(function(value) {
console.log(value); // 42
});
上面代碼中,thenable對象的then方法執(zhí)行后,對象p1的狀態(tài)就變?yōu)閞esolved,從而立即執(zhí)行最后那個then方法指定的回調(diào)函數(shù),輸出42。
(3) 參數(shù)不是具有then方法的對象,或根本就不是對象
如果參數(shù)是一個原始值,或者是一個不具有then方法的對象,則Promise.resolve方法返回一個新的Promise對象,狀態(tài)為Resolved。
var p = Promise.resolve('Hello');
p.then(function (s){
console.log(s)
});
// Hello
上面代碼生成一個新的Promise對象的實例p。由于字符串Hello不屬于異步操作(判斷方法是字符串對象不具有then方法),返回Promise實例的狀態(tài)從一生成就是 Resolved,所以回調(diào)函數(shù)會立即執(zhí)行。Promise.resolve方法的參數(shù),會同時傳給回調(diào)函數(shù)。
(4) 不帶有任何參數(shù)
Promise.resolve方法允許調(diào)用時不帶參數(shù),直接返回一個Resolved狀態(tài)的Promise對象。
所以,如果希望得到一個Promise對象,比較方便的方法就是直接調(diào)用Promise.resolve方法。
var p = Promise.resolve();
p.then(function () {
// ...
});
上面代碼的變量p就是一個Promise對象。
需要注意的是,立即resolve的Promise對象,是在本輪“事件循環(huán)”(event loop)的結(jié)束時,而不是在下一輪“事件循環(huán)”的開始時。
setTimeout(function () {
console.log('three');
}, 0);
Promise.resolve().then(function () {
console.log('two');
});
console.log('one');
// one
// two
// three
上面代碼中,setTimeout(fn, 0)在下一輪“事件循環(huán)”開始時執(zhí)行,Promise.resolve()在本輪“事件循環(huán)”結(jié)束時執(zhí)行,console.log('one')則是立即執(zhí)行,因此最先輸出。
- Promise.reject(value)
Promise.reject(reason)方法也會返回一個新的 Promise 實例,該實例的狀態(tài)為rejected。
var p4 =Promise.reject('Mistake');
p4.catch(err => console.log(err))