手寫promise，將靜態方法和實體方法都進行了一遍實作，也可以實作鏈式呼叫，
/*
* @Author: 毛毛
* @Date: 2022-01-03 10:17:47
* @Last Modified by: 毛毛
* @Last Modified time: 2022-01-03 10:17:47
*/
/**
*
* 手寫promise
* @class MaoPromise
*/
class MaoPromise {
/**
* 正在執行的狀態
*
* @static
* @memberof MaoPromise
*/
static _PROMISE_STATUS_PENDING = "pending";
/**
* 成功執行的狀態
*
* @static
* @memberof MaoPromise
*/
static _PROMISE_STATUS_FULFILLED = "fulfilled";
/**
* 失敗執行的狀態
*
* @static
* @memberof MaoPromise
*/
static _PROMISE_STATUS_REJECTED = "rejected";
/**
* 默認的狀態 執行中
*
* @memberof MaoPromise
*/
_status = MaoPromise._PROMISE_STATUS_PENDING;
/**
* 成功執行時 傳給 resolve函式的引數
*
* @memberof MaoPromise
*/
_value = undefined;
/**
* 失敗執行時 傳給 reject函式的引數
*
* @memberof MaoPromise
*/
_reason = undefined;
/**
* 成功執行的回呼函式
*
* @memberof MaoPromise
*/
_onFulfilledCallback = [];
/**
* 失敗執行的回呼函式
*
* @memberof MaoPromise
*/
_onRejectedCallback = [];
/**
* Creates an instance of MaoPromise.
* @param {Function} executor 執行器
* @memberof MaoPromise
*/
constructor(executor) {
try {
executor(this.resolve, this.reject);
} catch (err) {
this.reject(err);
}
}
/**
* 靜態方法resolve，回傳一個執行成功回呼的promise物件
*
* @static
* @param {*} value 執行成功回呼resolve的引數
* @return {MaoPromise}
* @memberof MaoPromise
*/
static resolve(value) {
return new MaoPromise((resolve) => resolve(value));
}
/**
* 靜態方法reject 回傳一個指向reject回呼的promise物件
*
* @static
* @param {*} reason 執行reject回呼的引數
* @return {MaoPromise}
* @memberof MaoPromise
*/
static reject(reason) {
return new MaoPromise((resolve, reject) => reject(reason));
}
/**
*
* 靜態方法 執行promise陣列內的全部的promise，全都執行完 且都是成功執行回呼
* 則執行 resolve回呼，且引數為全部成功執行promise元素的回呼函式resolve的引數的陣列，一旦有一個promise元素執行了reject或者拋出例外，則終止執行且立刻執行reject回呼
* @static
* @param {Array<MaoPromise>} promises 是一個promise陣列
* @return {*}
* @memberof MaoPromise
*/
static all(promises) {
return new MaoPromise((resolve, reject) => {
const values = [];
promises.forEach(promise => {
promise.then(res => {
values.push(res);
if (values.length === promises?.length) resolve(values);
}, err => reject(err));
});
});
}
/**
*
* allSettled 回傳一個在所有給定的promise都已經fulfilled或rejected后的promise，并帶有一個物件陣列，每個物件表示對應的promise結果，
* @static
* @param {Array<MaoPromise>} promises 是一個promise陣列
* @return {*}
* @memberof MaoPromise
*/
static allSettled(promises) {
return new MaoPromise((resolve) => {
const result = [];
promises.forEach(promise => {
promise.then(res => {
result.push({
status: MaoPromise._PROMISE_STATUS_FULFILLED,
value: res
});
if (result.length === promises?.length) resolve(result);
}, err => {
result.push({
status: MaoPromise._PROMISE_STATUS_REJECTED,
reason: err
});
if (result.length === promises?.length) resolve(result);
});
})
});
}
/**
*
* promise陣列的元素 有一個promise拿到了結果，無論是成功還是失敗，都直接結束
* @static
* @param {Array<MaoPromise>} promises 是一個promise陣列
* @memberof MaoPromise
*/
static race(promises) {
return new MaoPromise((resolve, reject) => {
promises.forEach(promise => {
promise.then(resolve, reject);
});
});
}
/**
*
* 只要其中的一個 promise 成功，就回傳那個已經成功的 promise ，
* 如果可迭代物件中沒有一個 promise 成功（即所有的 promises 都失敗/拒絕），
* 就回傳一個失敗的 promise 和AggregateError型別的實體，
* 它是 Error 的一個子類，用于把單一的錯誤集合在一起，
* 本質上，這個方法和Promise.all()是相反的，
* @static
* @param {Array<MaoPromise>} promises 是一個promise陣列
* @return {*}
* @memberof MaoPromise
*/
static any(promises) {
return new MaoPromise((resolve, reject) => {
const reasons = [];
promises.forEach(promise => {
promise.then(resolve, err => {
reasons.push(err);
if (reasons.length === promises?.length) reject(new AggregateError(reasons));
});
});
});
}
/**
* 成功時執行
*
* @param {*} value
* @memberof MaoPromise
*/
resolve = (value) => {
if (this._status === MaoPromise._PROMISE_STATUS_PENDING) {
// 延遲執行 queueMicrotask函式 將回呼函式的內容加入到微任務中執行
queueMicrotask(() => {
if (this._status !== MaoPromise._PROMISE_STATUS_PENDING) return;
this._value = value;
this._status = MaoPromise._PROMISE_STATUS_FULFILLED;
// 執行成功回呼
this._onFulfilledCallback.forEach(callback => {
callback(this._value);
});
});
}
}
/**
* 失敗時執行
*
* @param {*} reason
* @memberof MaoPromise
*/
reject = (reason) => {
if (this._status === MaoPromise._PROMISE_STATUS_PENDING) {
queueMicrotask(() => {
if (this._status !== MaoPromise._PROMISE_STATUS_PENDING) return;
this._reason = reason;
this._status = MaoPromise._PROMISE_STATUS_REJECTED;
// 執行失敗回呼
this._onRejectedCallback.forEach(callback => {
callback(this._reason);
});
});
}
}
/**
* then方法
*
* @param {*} onFulfilled 成功回呼
* @param {*} onRejected 失敗回呼
* @memberof MaoPromise
*/
then(onFulfilled, onRejected) {
// 如果 onRejected函式沒有傳 想要在catch方法中傳回呼
// TODO 那么如果傳入了onRejected回呼，又使用catch進行捕獲會如何？
onRejected = onRejected ?? (err => { throw err });
// 如果第一個then的resolve函式有回傳值，且鏈式呼叫程序后面出現的是catch
// 則成功回呼函式是 undefined，也就是回傳值不會被處理
// 所以我們需要在呼叫catch的時候，將上一個resolve的結果回傳出去
// 如果不給 onFulfilled賦值，則catch后面鏈式呼叫里面的回呼函式都不會執行
onFulfilled = onFulfilled ?? (value => value);
return new MaoPromise((resolve, reject) => {
// TODO 執行then函式的時候，狀態已經確定了，則直接執行成功回呼函式
if (this._status === MaoPromise._PROMISE_STATUS_FULFILLED) {
if (typeof onFulfilled === "function") {
this._executorFunctionWithCatchError(onFulfilled, this._value, resolve, reject);
}
}
else if (this._status === MaoPromise._PROMISE_STATUS_REJECTED) {
if (typeof onRejected === "function") {
this._executorFunctionWithCatchError(onRejected, this._reason, resolve, reject);
}
} else { // pending 狀態
// TODO 副作用函式的回傳值 作為then函式回傳值promise的(resolve,reject)的引數
// 狀態還沒確定之前 搜集副作用 在狀態改變之后 一起執行
if (typeof onFulfilled === "function")
// 為了收集到副作用執行后的回傳值 我們將副作用函式放到新的函式中 然后加入到副作用陣列中
this._onFulfilledCallback.push(() => {
this._executorFunctionWithCatchError(onFulfilled, this._value, resolve, reject);
});
if (typeof onRejected === "function")
this._onRejectedCallback.push(() => {
this._executorFunctionWithCatchError(onRejected, this._reason, resolve, reject);
});
}
});
}
/**
* catch方法的設計 巧妙的用了then方法，
* 但是考慮到我們可能會在catch方法后面，
* 鏈式的呼叫finally方法，所以需要將呼叫的then方法的回傳值 繼續回傳
*
* @param {*} onRejected 失敗/例外處理回呼
* @memberof MaoPromise
*/
catch(onRejected) {
return this.then(undefined, onRejected);
}
/**
* 最終執行promise的善后作業的代碼
*
* @param {*} onFinally 最侄訓呼
* @memberof MaoPromise
*/
finally(onFinally) {
// 還是借用then方法，不管成功還是失敗/例外 都會執行最侄訓呼
if (typeof onFinally === "function")
this.then(() => {
onFinally();
}, () => {
onFinally();
});
}
/**
* 執行副作用函式 進行例外的捕獲處理
*
* @param {*} execFn 副作用函式
* @param {*} value 上一個回呼函式(resolve,reject)執行時傳入的引數
* @param {*} resolve 成功回呼
* @param {*} reject 失敗回呼
* @memberof MaoPromise
*/
_executorFunctionWithCatchError(execFn, value, resolve, reject) {
try {
const res = execFn(value);
resolve(res);
} catch (err) {
reject(err);
}
}
}
// MaoPromise.reject("err or").catch((err) => {
// console.log(err);
// }).finally(() => {
// console.log("finally");
// });
const p1 = new MaoPromise((resolve, reject) => {
setTimeout(() => {
resolve(111);
}, 1000);
});
const p2 = new MaoPromise((resolve, reject) => {
setTimeout(() => {
reject(222);
}, 2000);
});
const p3 = new MaoPromise((resolve, reject) => {
setTimeout(() => {
resolve(333);
}, 3000);
});
MaoPromise.any([p2]).then((res) => {
console.log(res);
}).catch(err => {
console.log(err.errors);
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/402762.html
標籤：其他
上一篇：走進前端——HTML(2)