一、Promise是什么?
Promise是最早由社區(qū)提出和實(shí)現(xiàn)的一種解決異步編程的方案,比其他傳統(tǒng)的解決方案(回調(diào)函數(shù)和事件)更合理和更強(qiáng)大。
ES6 將其寫(xiě)進(jìn)了語(yǔ)言標(biāo)準(zhǔn),統(tǒng)一了用法,原生提供了Promise對(duì)象。
ES6 規(guī)定,Promise對(duì)象是一個(gè)構(gòu)造函數(shù),用來(lái)生成Promise實(shí)例。
二、Promise是為解決什么問(wèn)題而產(chǎn)生的?
promise是為解決異步處理回調(diào)金字塔問(wèn)題而產(chǎn)生的
三、Promise的兩個(gè)特點(diǎn)
1、Promise對(duì)象的狀態(tài)不受外界影響
1)pending 初始狀態(tài)
2)fulfilled 成功狀態(tài)
3)rejected 失敗狀態(tài)
Promise 有以上三種狀態(tài),只有異步操作的結(jié)果可以決定當(dāng)前是哪一種狀態(tài),其他任何操作都無(wú)法改變這個(gè)狀態(tài)
2、Promise的狀態(tài)一旦改變,就不會(huì)再變,任何時(shí)候都可以得到這個(gè)結(jié)果,狀態(tài)不可以逆,只能由 pending變成fulfilled或者由pending變成rejected
四、Promise的三個(gè)缺點(diǎn)
1)無(wú)法取消Promise,一旦新建它就會(huì)立即執(zhí)行,無(wú)法中途取消
2)如果不設(shè)置回調(diào)函數(shù),Promise內(nèi)部拋出的錯(cuò)誤,不會(huì)反映到外部
3)當(dāng)處于pending狀態(tài)時(shí),無(wú)法得知目前進(jìn)展到哪一個(gè)階段,是剛剛開(kāi)始還是即將完成
五、Promise在哪存放成功回調(diào)序列和失敗回調(diào)序列?
1)onResolvedCallbacks 成功后要執(zhí)行的回調(diào)序列 是一個(gè)數(shù)組
2)onRejectedCallbacks 失敗后要執(zhí)行的回調(diào)序列 是一個(gè)數(shù)組
以上兩個(gè)數(shù)組存放在Promise 創(chuàng)建實(shí)例時(shí)給Promise這個(gè)類傳的函數(shù)中,默認(rèn)都是空數(shù)組。
每次實(shí)例then的時(shí)候 傳入 onFulfilled 成功回調(diào) onRejected 失敗回調(diào),如果此時(shí)的狀態(tài)是pending 則將onFulfilled和onRejected push到對(duì)應(yīng)的成功回調(diào)序列數(shù)組和失敗回調(diào)序列數(shù)組中,如果此時(shí)的狀態(tài)是fulfilled 則onFulfilled立即執(zhí)行,如果此時(shí)的狀態(tài)是rejected則onRejected立即執(zhí)行
上述序列中的回調(diào)函數(shù)執(zhí)行的時(shí)候 是有順序的,即按照順序依次執(zhí)行
六、Promise的用法
1、Promise構(gòu)造函數(shù)接受一個(gè)函數(shù)作為參數(shù),該函數(shù)的兩個(gè)參數(shù)分別是resolve和reject。它們是兩個(gè)函數(shù),由 JavaScript 引擎提供,不用自己部署。
const promise = new Promise(function(resolve, reject) {
// ... some code
if (/* 異步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
2、resolve函數(shù)的作用是,將Promise對(duì)象的狀態(tài)從“未完成”變?yōu)椤俺晒Α保磸?pending 變?yōu)?resolved),在異步操作成功時(shí)調(diào)用,并將異步操作的結(jié)果,作為參數(shù)傳遞出去;reject函數(shù)的作用是,將Promise對(duì)象的狀態(tài)從“未完成”變?yōu)椤笆 保磸?pending 變?yōu)?rejected),在異步操作失敗時(shí)調(diào)用,并將異步操作報(bào)出的錯(cuò)誤,作為參數(shù)傳遞出去。
3、Promise實(shí)例生成以后,可以用then方法分別指定resolved狀態(tài)和rejected狀態(tài)的回調(diào)函數(shù)。
promise.then(function(value) {
// success
}, function(error) {
// failure
});
then方法可以接受兩個(gè)回調(diào)函數(shù)作為參數(shù)。第一個(gè)回調(diào)函數(shù)是Promise對(duì)象的狀態(tài)變?yōu)閞esolved時(shí)調(diào)用,第二個(gè)回調(diào)函數(shù)是Promise對(duì)象的狀態(tài)變?yōu)閞ejected時(shí)調(diào)用。其中,第二個(gè)函數(shù)是可選的,不一定要提供。這兩個(gè)函數(shù)都接受Promise對(duì)象傳出的值作為參數(shù)。
七、按照Promise A+規(guī)范寫(xiě)Promise的簡(jiǎn)單實(shí)現(xiàn)原理
// 第一步:Promise構(gòu)造函數(shù)接受一個(gè)函數(shù)作為參數(shù),該函數(shù)的兩個(gè)參數(shù)分別是resolve和reject。它們是兩個(gè)函數(shù),由 JavaScript 引擎提供,不用自己部署。
function Promise(task) {
let that = this; // 緩存this
that.status = 'pending'; // 進(jìn)行中的狀態(tài)
that.value = undefined; //初始值
that.onResolvedCallbacks = []; // 存放成功后要執(zhí)行的回調(diào)函數(shù)的序列
that.RejectedCallbacks = []; // 存放失敗后要執(zhí)行的回調(diào)函數(shù)的序列
// 該方法是將Promise由pending變成fulfilled
function resolve (value) {
if (that.status == 'pending') {
that.status = 'fulfilled';
that.value = value;
that.onResolvedCallbacks.forEach(cb => cd(that.value))
}
}
// 該方法是將Promise由pending變成rejected
function reject (reason) {
if (that.status == 'pending') {
that.status = 'rejected';
that.value = reason;
that.onRjectedCallbacks.forEach(cb => cd(that.value))
}
}
try {
// 每一個(gè)Promise在new一個(gè)實(shí)例的時(shí)候 接受的函數(shù)都是立即執(zhí)行的
task(resolve, reject)
} catch (e) {
reject(e)
}
}
// 第二部 寫(xiě)then方法,接收兩個(gè)函數(shù)onFulfilled onRejected,狀態(tài)是成功態(tài)的時(shí)候調(diào)用onFulfilled 傳入成功后的值,失敗態(tài)的時(shí)候執(zhí)行onRejected,傳入失敗的原因,pending 狀態(tài)時(shí)將成功和失敗后的這兩個(gè)方法緩存到對(duì)應(yīng)的數(shù)組中,當(dāng)成功或失敗后 依次再執(zhí)行調(diào)用
Promise.prototype.then = function(onFulfilled, onRejected) {
let that = this;
if (that.status == 'fulfilled') {
onFulfilled(that.value);
}
if (that.status == 'rejected') {
onRejected(that.value);
}
if (that.status == 'pending') {
that.onResolvedCallbacks.push(onFulfilled);
that.onRjectedCallbacks.push(onRejected);
}
}
八、Promise 鏈?zhǔn)綄?xiě)法
我們先來(lái)看一個(gè)例子,根據(jù)例子得出結(jié)論,然后再寫(xiě)源碼的實(shí)現(xiàn)部分來(lái)驗(yàn)證結(jié)論
let promise = new Promise(function (resolve, reject) {
resolve(100);// reject(100)
});
promise.then(function (data) {
return data+100;
},function (err) {
return 'ssss';
}).then(function (data) {
console.log(data);// 200 // undefined // sss
})
從上面的例子可以看出:
當(dāng)?shù)谝粋€(gè)promise的成功的回調(diào)里返回 200時(shí),第二個(gè)promise的成功回調(diào)的參數(shù)就是200
當(dāng)將resolve(100)改成reject(100)的時(shí)候,因?yàn)槭』卣{(diào)中什么也沒(méi)有返回所以第二個(gè)promise的成功回調(diào)中的參數(shù)是undefined
當(dāng)失敗的回調(diào)中返回sss時(shí),第二個(gè)promise的成功回調(diào)中的參數(shù)是sss
由此我們可以看出,第一個(gè)promise不管成功回調(diào)還是失敗回調(diào),他的返回值作為第二個(gè)promise中的成功時(shí)回調(diào)函數(shù)的參數(shù)值
鏈?zhǔn)綄?xiě)法能一直then下去的原因:鏈?zhǔn)秸{(diào)用靠的是返回新的promise,來(lái)保證可以一直走成功或失敗
九、 Promise.catch
Promise.prototype.catch方法是.then(null, rejection)的別名,用于指定發(fā)生錯(cuò)誤時(shí)的回調(diào)函數(shù)。
//catch原理就是只傳失敗的回調(diào)
Promise.prototype.catch = function(onRejected){
this.then(null,onRejected);
}
十、 Promise.all 方法
參數(shù):接受一個(gè)數(shù)組,數(shù)組內(nèi)都是Promise實(shí)例
返回值:返回一個(gè)Promise實(shí)例,這個(gè)Promise實(shí)例的狀態(tài)轉(zhuǎn)移取決于參數(shù)的Promise實(shí)例的狀態(tài)變化。當(dāng)參數(shù)中所有的實(shí)例都處于resolve狀態(tài)時(shí),返回的Promise實(shí)例會(huì)變?yōu)閞esolve狀態(tài)。如果參數(shù)中任意一個(gè)實(shí)例處于reject狀態(tài),返回的Promise實(shí)例變?yōu)閞eject狀態(tài)
Promise.all = function(promises){
return new Promise(function(resolve,reject){
let done = gen(promises.length,resolve);
for(let i=0;i<promises.length;i++){
promises[i].then(function(data){
done(i,data);
},reject);
}
});
}
十一、Promise.resolve
返回一個(gè)Promise實(shí)例,這個(gè)實(shí)例處于resolve狀態(tài)。
根據(jù)傳入的參數(shù)不同有不同的功能:
值(對(duì)象、數(shù)組、字符串等):作為resolve傳遞出去的值
Promise實(shí)例:原封不動(dòng)返回
//返回一個(gè)立刻成功的promise
//別人提供 給你一個(gè)方法,需要你傳入一個(gè)promise,但你只有一個(gè)普通的值,你就可以通過(guò)這個(gè)方法把這個(gè)普通的值(string number object)轉(zhuǎn)成一個(gè)promise對(duì)象
Promise.resolve = function(value){
return new Promise(function(resolve){
resolve(value);
});
}
十二、 Promise.reject
返回一個(gè)Promise實(shí)例,這個(gè)實(shí)例處于reject狀態(tài)。
參數(shù)一般就是拋出的錯(cuò)誤信息。
//返回一個(gè)立刻失敗的promise
Promise.reject = function(reason){
return new Promise(function(resolve,reject){
reject(reason);
});
}
十三、 Promise.race
參數(shù):接受一個(gè)數(shù)組,數(shù)組內(nèi)都是Promise實(shí)例
返回值:返回一個(gè)Promise實(shí)例,這個(gè)Promise實(shí)例的狀態(tài)轉(zhuǎn)移取決于參數(shù)的Promise實(shí)例的狀態(tài)變化。當(dāng)參數(shù)中任何一個(gè)實(shí)例處于resolve狀態(tài)時(shí),返回的Promise實(shí)例會(huì)變?yōu)閞esolve狀態(tài)。如果參數(shù)中任意一個(gè)實(shí)例處于reject狀態(tài),返回的Promise實(shí)例變?yōu)閞eject狀態(tài)。
Promise.race = function(promises){
return new Promise(function(resolve,reject){
for(let i=0;i<promises.length;i++){
promises[i].then(resolve,reject);
}
});
}