之前寫過一篇關于promise的一些常規(guī)用法，以及promise與async/await關系的文章。但是我們知道，要想把一個知識點完全掌握，知其然而不知其所以然是遠遠不夠的，那么接下來將要來探討promise的原理，來分析分析promise的這種規(guī)則機制是如何實現(xiàn)的。我們通過手寫promise的方式達到這個目的，同時來加深對primise的理解。
思路
手寫promise之前，我們先來回憶一下promise的使用方式，便于整理思路。
const p1 = new Promise((resolve, reject)=>{
console.log('此處同步執(zhí)行');
const a = 2;
setTimeout(()=>{
// 此處異步執(zhí)行
if(a>0){
resolve('成功');
}else{
reject('失敗原因');
}
},1000)
});
p1.then((res)=>{
console.log(res);
},(err)=>{
console.log(err);
})
從上面的代碼可以看出，要想使用promise需要先通過new Promise(fn)生成一個實例p1，然后通過實例p1調(diào)用then()和catch()方法。因此可以得出以下幾點結論：
-
Promise本身是一個構造函數(shù)，其參數(shù)fn是一個同步執(zhí)行的回調(diào)函數(shù)，該函數(shù)執(zhí)行的參數(shù)也是兩個函數(shù)resolve和reject。這兩個參數(shù)的作用是等異步操作執(zhí)行完成后，為后續(xù)方法的執(zhí)行傳參，如：then()和catch()。 -
then()用兩個函數(shù)作為參數(shù)，在實例p1中的resolve和reject方法中分別觸發(fā)對應的函數(shù)，并把異步操作執(zhí)行的結果傳遞給對應的函數(shù)。 -
Promise有三種狀態(tài)：pending、rejected和resolved，同步回調(diào)函數(shù)fn開始執(zhí)行時狀態(tài)為pending，執(zhí)行了resolve和reject后會將其狀態(tài)改為resolved和rejected。resolved和rejected只能執(zhí)行一次，且Promise狀態(tài)一旦被確定下來，那么就是不可更改的（鎖定）。
通過觀察Promise的使用方式得出的幾點結論，書寫promise的思路大致可以通過下面幾個方面來完成：
- 定義
Promise的三種狀態(tài)； - 創(chuàng)建構造函數(shù)，并為構造函數(shù)定義一個回調(diào)函數(shù)作為參數(shù)；
- 在構造函數(shù)內(nèi)定義變量來保存
Promise的狀態(tài)，定義兩個函數(shù)resolve和reject，并在構造函數(shù)中執(zhí)行回調(diào)函數(shù)的時候?qū)⒋藗魅耄?/li> - 函數(shù)
resolve和reject目前的作用是改變Promise的狀態(tài)，保存異步操作返回的值或者失敗的原因； - 為構造函數(shù)創(chuàng)建
then()方法，then()方法的參數(shù)是兩個函數(shù)onResolved、onRejected，這兩個函數(shù)將被傳入構造函數(shù)內(nèi)定義的resolve和reject方法中執(zhí)行。此時函數(shù)resolve和reject發(fā)揮了它的第二個作用，就是執(zhí)行then()方法傳遞過來的回調(diào)函數(shù)。
實現(xiàn)
有了大致的思路，那么接下來就是如何去實現(xiàn)它。
- Promise構造函數(shù)的設計，對應思路1、2、3、4
const PROMISE_STATUS_PENDING = 'pending';
const PROMISE_STATUS_FULFILLED = 'fulfilled';
const PROMISE_STATUS_REJECTED = 'rejected';
class myPromise {
// * 記錄狀態(tài)
constructor(executor) {
// * 保存Promise的狀態(tài)
this.status = PROMISE_STATUS_PENDING;
// * 保存?zhèn)魅氲闹? this.value = undefined;
this.reason = undefined;
const resolve = value => {
if (this.status == PROMISE_STATUS_PENDING) {
this.status = PROMISE_STATUS_FULFILLED;
this.value = value;
console.log('resolve被調(diào)用');
}
};
const reject = reason => {
if (this.status == PROMISE_STATUS_PENDING) {
this.status = PROMISE_STATUS_REJECTED;
this.reason = reason;
console.log('reject被調(diào)用');
}
};
executor(resolve, reject);
}
}
- 定義好構造函數(shù)，接下來的任務就是書寫構造函數(shù)的方法了，對應5。修改上面的代碼如下：
const PROMISE_STATUS_PENDING = 'pending';
const PROMISE_STATUS_FULFILLED = 'fulfilled';
const PROMISE_STATUS_REJECTED = 'rejected';
class myPromise {
// * 記錄狀態(tài)
constructor(executor) {
// * 保存Promise的狀態(tài)
this.status = PROMISE_STATUS_PENDING;
// * 保存?zhèn)魅氲闹? this.value = undefined;
this.reason = undefined;
const resolve = value => {
if (this.status == PROMISE_STATUS_PENDING) {
this.status = PROMISE_STATUS_FULFILLED;
//* 定時器是一個宏任務，會放在下一次事件循環(huán)時使用
queueMicrotask(() => {
this.value = value;
console.log('resolve被調(diào)用', this.value);
// * 執(zhí)行then傳入進來的第一個回調(diào)函數(shù)
this.onResolved(this.value);
});
}
};
const reject = reason => {
if (this.status == PROMISE_STATUS_PENDING) {
this.status = PROMISE_STATUS_REJECTED;
queueMicrotask(() => {
this.reason = reason;
console.log('reject被調(diào)用', this.reason);
// * 執(zhí)行then傳入進來的第二個回調(diào)函數(shù)
this.onRejected(this.reason);
});
}
};
executor(resolve, reject);
}
// then方法
then(onResolved, onRejected) {
this.onResolved = onResolved;
this.onRejected = onRejected;
}
}
優(yōu)化
完成以上代碼已經(jīng)搭建了一個具備基本功能的Promise，不防試一下，相信它會帶給你滿意的結果。
const promise = new myPromise((resolve, reject) => {
console.log('狀態(tài)pending');
resolve('1111');
});
promise.then(
res => {
console.log('res:', res);
},
err => {
console.log('err:', err);
},
);
運行以上代碼，命令行會相繼輸出狀態(tài)pending、resolve被調(diào)用 1111、res: 1111等，這代表著最基礎版的Promise已經(jīng)完成了。但是它仍然有很多問題，比如then()方法無法多次調(diào)用和鏈式調(diào)用、沒有catch()方法等，所以接下來我們就要優(yōu)化上面基礎版的Promise，使它具備和官方基本一致的功能。
- 實現(xiàn)
then()的多次調(diào)用
then()多次調(diào)用就需要在構造函數(shù)里定義兩個數(shù)組保存then()方法中傳進來的回調(diào)，然后遍歷這個數(shù)組，執(zhí)行數(shù)組里的所有回調(diào)函數(shù)，修改代碼如下:
const PROMISE_STATUS_PENDING = 'pending';
const PROMISE_STATUS_FULFILLED = 'fulfilled';
const PROMISE_STATUS_REJECTED = 'rejected';
class myPromise {
// * 記錄狀態(tài)
constructor(executor) {
// * 保存Promise的狀態(tài)
this.status = PROMISE_STATUS_PENDING;
// * 保存?zhèn)魅氲闹? this.value = undefined;
this.reason = undefined;
this.onResolvedFns = [];
this.onRejectedFns = [];
const resolve = value => {
if (this.status == PROMISE_STATUS_PENDING) {
//* 定時器是一個宏任務，會放在下一次事件循環(huán)時使用
queueMicrotask(() => {
this.status = PROMISE_STATUS_FULFILLED;
this.value = value;
console.log('resolve被調(diào)用', this.value);
// * 執(zhí)行then傳入進來的第一個回調(diào)函數(shù)
this.onResolvedFns.forEach(Fn => {
Fn(this.value);
});
});
}
};
const reject = reason => {
if (this.status == PROMISE_STATUS_PENDING) {
queueMicrotask(() => {
this.status = PROMISE_STATUS_REJECTED;
this.reason = reason;
console.log('reject被調(diào)用', this.reason);
// * 執(zhí)行then傳入進來的第二個回調(diào)函數(shù)
this.onRejectedFns.forEach(Fn => {
Fn(this.reason);
});
});
}
};
executor(resolve, reject);
}
// then方法
then(onResolved, onRejected) {
console.log(this.status);
// 如果then方法調(diào)用的時候，狀態(tài)已經(jīng)確定下來了，應該直接執(zhí)行的
if (this.status === PROMISE_STATUS_FULFILLED && onResolved) {
onResolved(this.value);
} else if (this.status === PROMISE_STATUS_REJECTED && onRejected) {
onRejected(this.reason);
} else {
// 將成功回調(diào)和失敗回調(diào)添加到數(shù)組中
this.onResolvedFns.push(onResolved);
this.onRejectedFns.push(onRejected);
}
}
}
- 實現(xiàn)
then()的鏈式調(diào)用
從上面的代碼中可以清楚的看到then()方法是掛載在構造函數(shù)myPromise上的，所以為了實現(xiàn)鏈式調(diào)用，需要在then()方法里返回一個新的Promise對象，然后使用新的Promise對象的resolve方法去處理對應的回調(diào)函數(shù)的返回值。從代碼的簡潔度考慮，我們需要封裝一個工具函數(shù)，用來處理異常和回調(diào)函數(shù)。
與此同時，當回調(diào)函數(shù)executor的執(zhí)行發(fā)生異常時，也許有執(zhí)行reject|函數(shù)。因此，我們把代碼調(diào)整如下：
const PROMISE_STATUS_PENDING = 'pending';
const PROMISE_STATUS_FULFILLED = 'fulfilled';
const PROMISE_STATUS_REJECTED = 'rejected';
// 工具函數(shù)
function execFunctionWithCatchError(exeFn, value, resolve, reject) {
try {
let result = exeFn(value);
resolve(result);
} catch (err) {
reject(err);
}
}
class myPromise {
// * 記錄狀態(tài)
constructor(executor) {
// * 保存Promise的狀態(tài)
this.status = PROMISE_STATUS_PENDING;
// * 保存?zhèn)魅氲闹? this.value = undefined;
this.reason = undefined;
this.onResolvedFns = [];
this.onRejectedFns = [];
const resolve = value => {
if (this.status == PROMISE_STATUS_PENDING) {
// * 添加微任務
//* 定時器是一個宏任務，會放在下一次事件循環(huán)時使用
queueMicrotask(() => {
if (this.status !== PROMISE_STATUS_PENDING) return;
this.status = PROMISE_STATUS_FULFILLED;
this.value = value;
// console.log('resolve被調(diào)用', this.value);
// * 執(zhí)行then傳入進來的第一個回調(diào)函數(shù)
this.onResolvedFns.forEach(Fn => {
Fn(this.value);
});
});
}
};
const reject = reason => {
if (this.status == PROMISE_STATUS_PENDING) {
// * 添加微任務
queueMicrotask(() => {
if (this.status !== PROMISE_STATUS_PENDING) return;
this.status = PROMISE_STATUS_REJECTED;
this.reason = reason;
// console.log('reject被調(diào)用', this.reason);
// * 執(zhí)行then傳入進來的第二個回調(diào)函數(shù)
this.onRejectedFns.forEach(Fn => {
Fn(this.reason);
});
});
}
};
// * 在調(diào)用executor時判斷里面是否拋出異常
try {
executor(resolve, reject);
} catch (err) {
reject(err);
}
}
// then方法
then(onResolved, onRejected) {
return new myPromise((resolve, reject) => {
// 如果then方法調(diào)用的時候，狀態(tài)已經(jīng)確定下來了，應該直接執(zhí)行的
if (this.status === PROMISE_STATUS_FULFILLED && onResolved) {
// onResolved(this.value);
execFunctionWithCatchError(onResolved, this.value, resolve, reject);
} else if (this.status === PROMISE_STATUS_REJECTED && onRejected) {
// onRejected(this.reason);
execFunctionWithCatchError(
onRejected,
this.reason,
resolve,
reject,
);
} else {
// 將成功回調(diào)和失敗回調(diào)添加到數(shù)組中
this.onResolvedFns.push(() => {
execFunctionWithCatchError(
onResolved,
this.value,
resolve,
reject,
);
});
this.onRejectedFns.push(() => {
execFunctionWithCatchError(
onRejected,
this.reason,
resolve,
reject,
);
});
}
});
}
}
-
catch()方法的實現(xiàn)
我們知道，在官方提供的Promise中可不止then()一種方法，其中最常用的便是catch()方法了。
catch()與then()方法不同，它只會接受一個onRejected的回調(diào)函數(shù)，catch()方法執(zhí)行的其實是then()方法第二個參數(shù)的工作，then(null, function() {})就等同于catch(function() {})。但是用this.then(undefined,onRejected);來實現(xiàn)catch()方法顯然是不可以的，因為這樣做的話，catch()方法是針對新的Promise的rejected的狀態(tài)，我們要解決的問題就是如何讓catch()方法捕獲原Promise對象的rejected狀態(tài)。
所以我們要對then()方法做一些改動，在方法內(nèi)部前面判斷第二個參數(shù)是否有值，如果沒有值，就重新賦值為一個函數(shù)，函數(shù)內(nèi)部拋出一個異常。這樣在新的Promise就能捕獲到原來的promise的rejected的狀態(tài)了。具體實現(xiàn)方式如下：
const PROMISE_STATUS_PENDING = 'pending';
const PROMISE_STATUS_FULFILLED = 'fulfilled';
const PROMISE_STATUS_REJECTED = 'rejected';
// 工具函數(shù)
function execFunctionWithCatchError(exeFn, value, resolve, reject) {
try {
let result = exeFn(value);
resolve(result);
} catch (err) {
reject(err);
}
}
class myPromise {
// * 記錄狀態(tài)
constructor(executor) {
// * 保存Promise的狀態(tài)
this.status = PROMISE_STATUS_PENDING;
// * 保存?zhèn)魅氲闹? this.value = undefined;
this.reason = undefined;
this.onResolvedFns = [];
this.onRejectedFns = [];
const resolve = value => {
if (this.status == PROMISE_STATUS_PENDING) {
// * 添加微任務
//* 定時器是一個宏任務，會放在下一次事件循環(huán)時使用
queueMicrotask(() => {
if (this.status !== PROMISE_STATUS_PENDING) return;
this.status = PROMISE_STATUS_FULFILLED;
this.value = value;
// console.log('resolve被調(diào)用', this.value);
// * 執(zhí)行then傳入進來的第一個回調(diào)函數(shù)
this.onResolvedFns.forEach(Fn => {
Fn(this.value);
});
});
}
};
const reject = reason => {
if (this.status == PROMISE_STATUS_PENDING) {
// * 添加微任務
queueMicrotask(() => {
if (this.status !== PROMISE_STATUS_PENDING) return;
this.status = PROMISE_STATUS_REJECTED;
this.reason = reason;
// console.log('reject被調(diào)用', this.reason);
// * 執(zhí)行then傳入進來的第二個回調(diào)函數(shù)
this.onRejectedFns.forEach(Fn => {
Fn(this.reason);
});
});
}
};
// * 在調(diào)用executor時判斷里面是否拋出異常
try {
executor(resolve, reject);
} catch (err) {
reject(err);
}
}
// then方法
then(onResolved, onRejected) {
onRejected =
onRejected ||
(err => {
throw err;
});
return new myPromise((resolve, reject) => {
// 如果then方法調(diào)用的時候，狀態(tài)已經(jīng)確定下來了，應該直接執(zhí)行的
if (this.status === PROMISE_STATUS_FULFILLED && onResolved) {
// onResolved(this.value);
execFunctionWithCatchError(onResolved, this.value, resolve, reject);
} else if (this.status === PROMISE_STATUS_REJECTED && onRejected) {
// onRejected(this.reason);
execFunctionWithCatchError(
onRejected,
this.reason,
resolve,
reject,
);
} else {
// 將成功回調(diào)和失敗回調(diào)添加到數(shù)組中
if (onResolved)
this.onResolvedFns.push(() => {
execFunctionWithCatchError(
onResolved,
this.value,
resolve,
reject,
);
});
if (onRejected)
this.onRejectedFns.push(() => {
execFunctionWithCatchError(
onRejected,
this.reason,
resolve,
reject,
);
});
}
});
}
// * catch方法
catch(onRejected) {
this.then(undefined, onRejected);
}
}
-
finally()方法的實現(xiàn)
前面講到的then()和catch()都是Promise的實例方法，也可以稱為對象方法，除此之外，Promise還有一個實例方法，那就是finally()。finally()方法大致可以概括如下：
-
finally是ES9（ES2018）新增的一個特性：表示無論Promise的狀態(tài)變?yōu)?code>resolved還是reject，最終都會被執(zhí)行的代碼。 -
finally方法是不接收參數(shù)的，因為無論前面是resolved狀態(tài)，還是reject狀態(tài)，它都會執(zhí)行。 -
finally其實也是返回一個Promise對象，但是其實很少人會用它。
因此，finally方法的實現(xiàn)也很簡單，只需要在Promise構造函數(shù)中定義一個方法，無論promise的狀態(tài)是什么。代碼實現(xiàn)如下：
const PROMISE_STATUS_PENDING = 'pending';
const PROMISE_STATUS_FULFILLED = 'fulfilled';
const PROMISE_STATUS_REJECTED = 'rejected';
// 工具函數(shù)
function execFunctionWithCatchError(exeFn, value, resolve, reject) {
try {
let result = exeFn(value);
resolve(result);
} catch (err) {
reject(err);
}
}
class myPromise {
// * 記錄狀態(tài)
constructor(executor) {
// * 保存Promise的狀態(tài)
this.status = PROMISE_STATUS_PENDING;
// * 保存?zhèn)魅氲闹? this.value = undefined;
this.reason = undefined;
this.onResolvedFns = [];
this.onRejectedFns = [];
const resolve = value => {
if (this.status == PROMISE_STATUS_PENDING) {
// * 添加微任務
//* 定時器是一個宏任務，會放在下一次事件循環(huán)時使用
queueMicrotask(() => {
if (this.status !== PROMISE_STATUS_PENDING) return;
this.status = PROMISE_STATUS_FULFILLED;
this.value = value;
// console.log('resolve被調(diào)用', this.value);
// * 執(zhí)行then傳入進來的第一個回調(diào)函數(shù)
this.onResolvedFns.forEach(Fn => {
Fn(this.value);
});
});
}
};
const reject = reason => {
if (this.status == PROMISE_STATUS_PENDING) {
// * 添加微任務
queueMicrotask(() => {
if (this.status !== PROMISE_STATUS_PENDING) return;
this.status = PROMISE_STATUS_REJECTED;
this.reason = reason;
// console.log('reject被調(diào)用', this.reason);
// * 執(zhí)行then傳入進來的第二個回調(diào)函數(shù)
this.onRejectedFns.forEach(Fn => {
Fn(this.reason);
});
});
}
};
// * 在調(diào)用executor時判斷里面是否拋出異常
try {
executor(resolve, reject);
} catch (err) {
reject(err);
}
}
// then方法
then(onResolved, onRejected) {
onRejected =
onRejected ||
(err => {
throw err;
});
return new myPromise((resolve, reject) => {
// 如果then方法調(diào)用的時候，狀態(tài)已經(jīng)確定下來了，應該直接執(zhí)行的
if (this.status === PROMISE_STATUS_FULFILLED && onResolved) {
// onResolved(this.value);
execFunctionWithCatchError(onResolved, this.value, resolve, reject);
} else if (this.status === PROMISE_STATUS_REJECTED && onRejected) {
// onRejected(this.reason);
execFunctionWithCatchError(
onRejected,
this.reason,
resolve,
reject,
);
} else {
// 將成功回調(diào)和失敗回調(diào)添加到數(shù)組中
if (onResolved)
this.onResolvedFns.push(() => {
execFunctionWithCatchError(
onResolved,
this.value,
resolve,
reject,
);
});
if (onRejected)
this.onRejectedFns.push(() => {
execFunctionWithCatchError(
onRejected,
this.reason,
resolve,
reject,
);
});
}
});
}
// * catch方法
catch(onRejected) {
this.then(undefined, onRejected);
}
// finally方法
finally(onFinally) {
return this.then(
() => {
onFinally();
},
() => {
onFinally();
},
);
}
}
-
Promise的類方法的實現(xiàn)
前面說到的then、catch、finally方法都屬于Promise的實例方法，都是存放在Promise的prototype上的。下面我們將學習類方法。
-
Promise.resolve()方法：有時候我們已經(jīng)有一個現(xiàn)成的內(nèi)容，希望將其轉(zhuǎn)成Promise來使用，這個時候我們可以使用Promise.resolve()方法來完成，所以Promise.resolve()相當于new Promise，并且執(zhí)行resolve操作。 -
Promise.reject()方法：reject方法類似于resolve方法，只是會將Promise對象的狀態(tài)設置為rejected狀態(tài)，所以Promise.reject無論傳過來的參數(shù)是什么狀態(tài)，都會直接作為reject的參數(shù)傳遞到catch的。 -
Promise.all()方法：Promise.all()我們在上一篇中講過，對于用法這里不再多做闡述，大致可以歸納為只有當所有的promise都變成resolved狀態(tài)時，原promise才會變成resolved狀態(tài)，相反當任意一個promise變成rejected狀態(tài)時，原promise就會變成rejected狀態(tài)，并且仍然處于pending狀態(tài)的promise將不會獲取到結果。不明白的同學請自行查閱Promise 與async/await。 -
Promise.allSettled()方法：Promise.allSettled是ES11（ES2020）中新添加的API，它用于解決Promise.all()方法的一個缺陷（也是其特征）：當有一個Promise變成rejected狀態(tài)時，新Promise就會立即變成對應的rejected狀態(tài)。 Promise.allSettled方法會在所有的Promise都有結果時，無論是resolved，還是rejected，才會有最終的狀態(tài)，并且這個Promise的結果一定是resolved`。 -
Promise.race()方法：Promise.race()方法同樣在上一篇中講過，大致可以歸納為:數(shù)組中的其中一個promise返回狀態(tài)時，無論此狀態(tài)是resolved或者rejected，它都將會成為原promise的狀態(tài)，即先到先得。 -
Promise.any()方法：Promise.any()方法是ES12中新增的方法，和Promise.race()方法是類似的。Promise.any()方法會等到一個resolved狀態(tài)，才會決定新Promise的狀態(tài)，就算所有的Promise都是rejected的，那么也會等到所有的Promise都變成rejected狀態(tài)，err信息為：AggregateError: All promises were rejected。
看完所有Promise類方法的使用，接下來我們就開下怎么來實現(xiàn)他們吧。
const PROMISE_STATUS_PENDING = 'pending';
const PROMISE_STATUS_FULFILLED = 'fulfilled';
const PROMISE_STATUS_REJECTED = 'rejected';
// 工具函數(shù)
function execFunctionWithCatchError(exeFn, value, resolve, reject) {
try {
const result = exeFn(value);
resolve(result);
} catch (err) {
reject(err);
}
}
class myPromise {
// * 記錄狀態(tài)
constructor(executor) {
// * 保存Promise的狀態(tài)
this.status = PROMISE_STATUS_PENDING;
// * 保存?zhèn)魅氲闹? this.value = undefined;
this.reason = undefined;
this.onResolvedFns = [];
this.onRejectedFns = [];
const resolve = value => {
if (this.status == PROMISE_STATUS_PENDING) {
// * 添加微任務
//* 定時器是一個宏任務，會放在下一次事件循環(huán)時使用
queueMicrotask(() => {
if (this.status !== PROMISE_STATUS_PENDING) return;
this.status = PROMISE_STATUS_FULFILLED;
this.value = value;
// console.log('resolve被調(diào)用', this.value);
// * 執(zhí)行then傳入進來的第一個回調(diào)函數(shù)
this.onResolvedFns.forEach(Fn => {
Fn(this.value);
});
});
}
};
const reject = reason => {
if (this.status == PROMISE_STATUS_PENDING) {
// * 添加微任務
queueMicrotask(() => {
if (this.status !== PROMISE_STATUS_PENDING) return;
this.status = PROMISE_STATUS_REJECTED;
this.reason = reason;
// console.log('reject被調(diào)用', this.reason);
// * 執(zhí)行then傳入進來的第二個回調(diào)函數(shù)
this.onRejectedFns.forEach(Fn => {
Fn(this.reason);
});
});
}
};
// * 在調(diào)用executor時判斷里面是否拋出異常
try {
executor(resolve, reject);
} catch (err) {
reject(err);
}
}
// then方法
then(onResolved, onRejected) {
onRejected =
onRejected ||
(err => {
throw err;
});
return new myPromise((resolve, reject) => {
// 如果then方法調(diào)用的時候，狀態(tài)已經(jīng)確定下來了，應該直接執(zhí)行的
if (this.status === PROMISE_STATUS_FULFILLED && onResolved) {
// onResolved(this.value);
execFunctionWithCatchError(onResolved, this.value, resolve, reject);
} else if (this.status === PROMISE_STATUS_REJECTED && onRejected) {
// onRejected(this.reason);
execFunctionWithCatchError(
onRejected,
this.reason,
resolve,
reject,
);
} else {
// 將成功回調(diào)和失敗回調(diào)添加到數(shù)組中
if (onResolved)
this.onResolvedFns.push(() => {
execFunctionWithCatchError(
onResolved,
this.value,
resolve,
reject,
);
});
if (onRejected)
this.onRejectedFns.push(() => {
execFunctionWithCatchError(
onRejected,
this.reason,
resolve,
reject,
);
});
}
});
}
// * catch方法
catch(onRejected) {
this.then(undefined, onRejected);
}
// finally方法
finally(onFinally) {
return this.then(
() => {
onFinally();
},
() => {
onFinally();
},
);
}
// 類方法resolve
static resolve(value) {
return new myPromise((resolve, reject) => {
resolve(value);
});
}
// 類方法reject
static reject(reason) {
return new myPromise((resolve, reject) => {
reject(reason);
});
}
// 類方法all
static all(promises) {
// * 問題關鍵：什么時候執(zhí)行resolve，什么時候執(zhí)行reject
return new myPromise((resolve, reject) => {
let values = [];
promises.forEach(promise => {
promise
.then(res => {
values.push(res);
if (values.length == promises.length) resolve(values);
})
.catch(err => {
reject(err);
});
});
});
}
// 類方法allSettled
static allSettled(promises) {
return new myPromise((resolve, reject) => {
let results = [];
promises.forEach(promise => {
promise
.then(res => {
results.push({ status: PROMISE_STATUS_FULFILLED, value: res });
if (results.length == promises.length) resolve(results);
})
.catch(err => {
results.push({ status: PROMISE_STATUS_REJECTED, value: err });
if (results.length == promises.length) resolve(results);
});
});
});
}
// 類方法race
static race(promises) {
return new myPromise((resolve, reject) => {
promises.forEach(promise => {
// promise.then(res=>{
// resolve(res);
// }).catch(err=>{
// reject(err);
// })
promise.then(resolve, reject);
});
});
}
// 類方法any
static any(promises) {
// * resolve 必須等待有一個成功的結果
// * reject 所有的都失敗才執(zhí)行 reject
return new myPromise((resolve, reject) => {
let reasons = [];
promises.forEach(promise => {
promise
.then(res => {
resolve(res);
})
.catch(err => {
reasons.push(err);
if (reasons.length == promises.length) {
reject(
new AggregateError(
reasons,
' AggregateError: All promises were rejected',
),
);
}
});
});
});
}
}
說了這么多，最后放上一張Promise的知識點關系圖作為結束。
promise.png
