class Promise {
constructor(excutor) {
// 設置promise 狀態(tài) 有 pending fulfilled rejected
this.promiseState = "pending";
// promise 返回的結(jié)果
this.promiseResult = null;
// 用于接收異步需要執(zhí)行的函數(shù)
this.callbacks = [];
const that = this;
function resolve(data) {
// 當狀態(tài)不是pending狀態(tài) 說明已經(jīng)改完狀態(tài),promise 只允許改變一次狀態(tài)
if (that.promiseState !== "pending") return;
that.promiseResult = data;
// 執(zhí)行reslove函數(shù) 將promise狀態(tài)改為fulfilled
that.promiseState = "fulfilled";
for (let i = 0; i < that.callbacks.length; i++) {
that.callbacks[i].OnResolved &&
setTimeout(() => {
that.callbacks[i].OnResolved(data);
});
}
}
function reject(data) {
if (that.promiseState !== "pending") return;
// 執(zhí)行reject函數(shù) 將promise狀態(tài)改為rejected
that.promiseState = "rejected";
that.promiseResult = data;
for (let i = 0; i < that.callbacks.length; i++) {
that.callbacks[i].OnRejected &&
setTimeout(() => {
that.callbacks[i].OnRejected(data);
});
}
}
// 當在執(zhí)行器函數(shù)里不調(diào)用resolve reject 使用throw new Error 或者代碼有錯誤 就需要使用try catch 進行捕獲錯誤
try {
excutor(resolve, reject);
} catch (err) {
// 捕獲到錯誤則使用reject進行錯誤處理
reject(err.message);
}
}
// then 方法 當狀態(tài)改變進行處理相對應狀態(tài)的回調(diào)函數(shù),then方法默認返回一個promise 當return undeined 或者其他值 then返回都是一個成功狀態(tài)的promise
// 當回調(diào)函數(shù)里返回一個新的promise對象, 那么then 返回的就是這個promise對象的狀態(tài)的promise
then(OnResolved = (value) => value, OnRejected = null) {
const self = this;
// 當then沒有傳第二個參數(shù),此時如果有錯的話就無法傳遞錯誤,使其異常穿透
if (typeof OnRejected !== "function") {
OnRejected = function (reason) {
throw reason;
};
}
// then 返回的都是一個promise對象 所以首先返回一個promise
return new Promise((resolve, reject) => {
// 封裝函數(shù)
function callback(type) {
try {
// 先執(zhí)行 傳入的函數(shù)看是否是promise promise的話狀態(tài)就是then的狀態(tài),不行promise直接resolve(result)
let result = type(self.promiseResult);
result instanceof Promise
? result.then(
(v) => {
resolve(result);
},
(r) => {
reject(result);
}
)
: resolve(result);
} catch (e) {
reject(e);
}
}
// 當執(zhí)行到then的時候,promise狀態(tài)還是pending,證明是沒有調(diào)用resolve或reject 或 拋出錯誤,極大可能是進行異步操作
if (this.promiseState === "pending") {
// 異步操作需要將then方法里的回調(diào)函數(shù)收集起來,等之前異步結(jié)束,調(diào)用resolve等方法時調(diào)用這些回調(diào)函數(shù)
// 避免將之前的回調(diào)函數(shù)覆蓋,采用數(shù)組追加的方式進行添加
this.callbacks.push({
OnResolved: function () {
callback(OnResolved);
},
OnRejected: function () {
callback(OnRejected);
},
});
} else {
// 不是pending狀態(tài)
this.promiseState === "fulfilled"
? setTimeout(() => {
callback(OnResolved);
})
: setTimeout(() => {
callback(OnRejected);
});
}
});
}
catch(OnRejected) {
// console.log(this.then);
return this.then(undefined, OnRejected);
}
static resolve(value) {
return new Promise((resolve, reject) => {
value instanceof Promise
? value.then(
(v) => {
resolve(v);
},
(r) => {
reject(r);
}
)
: resolve(value);
});
}
static reject(value) {
return new Promise((resolve, reject) => {
reject(value);
});
}
static all(promise) {
let count = 0;
let result = [];
return new Promise((resolve, reject) => {
for (let i = 0; i < promise.length; i++) {
promise[i].then(
(v) => {
count++;
result[i] = v;
if (count === promise.length) {
resolve(result);
}
},
(r) => {
reject(r);
}
);
}
});
}
static race(promise) {
return new Promise((resolve, reject) => {
for (let i = 0; i < promise.length; i++) {
promise[i].then(
(v) => {
resolve(v);
},
(r) => {
reject(r);
}
);
}
});
}
}
promise原理手寫
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
相關(guān)閱讀更多精彩內(nèi)容
- 原生Promise底層是系統(tǒng)底層實現(xiàn)的微任務,我們通過代碼無法實現(xiàn),只能模擬宏任務去實現(xiàn)
- 文章內(nèi)容輸出來源:拉勾教育大前端高薪訓練營文章說明:文章內(nèi)容為學習筆記,學徒之心,僅為分享; 如若有誤,請在評論區(qū)...
- class Promise{ constructor(excutorCallBack){ this.status ...