Promise
是JS進行異步操作的重要API,也是開發(fā)基本上繞不開的技術(shù),所以很有必要對其進行深入的了解。本文我們就 一步步手動實現(xiàn)Promise
的相關(guān)功能齐疙。
Promise
屬性和構(gòu)造函數(shù)
原生功能
Promise
對象的屬性
- 驗證原生
Promise
let p = new Promise((resolve, reject) => {});
console.log(p);
- 結(jié)果:
[[Prototype]]: Promise
[[PromiseState]]: "pending"
[[PromiseResult]]: undefined
- 結(jié)論:
原生
Promise
有兩個屬性,PromiseState
和PromiseResult
Promise
構(gòu)造函數(shù)
- 驗證原生
Promise
let p = new Promise((resolve, reject) => {
resolve("success");
});
console.log(p);
- 結(jié)果:
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "success"
- 結(jié)論
resolve
函數(shù)作用: 1) 將Promise
的PromiseState
由 默認(rèn)的 pending 變成了 fulfilled旭咽, 2) 將Promise
的PromiseResult
由undefined變成了函數(shù)的傳入?yún)?shù)success贞奋。(resolve, reject) => { ... }
這函數(shù)在初始化對象的時候是同步執(zhí)行的。
- 驗證原生
Promise
let p = new Promise((resolve, reject) => {
reject("failed")
});
console.log(p);
- 結(jié)果:
[[Prototype]]: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: "failed"
- 結(jié)論
reject
函數(shù)作用: 1) 將Promise
的PromiseState
由 默認(rèn)的 pending 變成了 rejected穷绵, 2) 將Promise
的PromiseResult
由undefined變成了函數(shù)的傳入?yún)?shù)failed轿塔。
代碼模擬實現(xiàn)
function Promise(executor) {
// 記錄上下文,否則resolve和reject的this調(diào)用會有問題
var _this = this;
// 1. 設(shè)置屬性
this.PromiseState = "pending";
this.PromiseResult = undefined;
// 2. 兩個對外暴露的函數(shù)接收傳入的參數(shù)data,然后可以改變PromiseState和PromiseResult
function resolve(data) {
_this.PromiseState = "fulfilled";
_this.PromiseResult = data;
}
function reject(data) {
_this.PromiseState = "rejected";
_this.PromiseResult = data;
}
// 3. 構(gòu)造函數(shù)execotor會同步執(zhí)行
executor(resolve, reject);
}
Promise
構(gòu)造器函數(shù)執(zhí)行拋出異常
- 驗證原生
Promise
let p = new Promise((resolve, reject) => {
throw "throwed error"
});
console.log(p);
- 結(jié)果:
[[Prototype]]: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: "throwed error"
- 結(jié)論
Promise
構(gòu)造器函數(shù)執(zhí)行拋出異常則PromiseState
變?yōu)?code>rejected,PromiseResult
為拋出異常的內(nèi)容勾缭。
代碼模擬實現(xiàn)
function Promise(executor) {
var _this = this;
this.PromiseState = "pending";
this.PromiseResult = undefined;
function resolve(data) {
_this.PromiseState = "fulfilled";
_this.PromiseResult = data;
}
function reject(data) {
_this.PromiseState = "rejected";
_this.PromiseResult = data;
}
// 用try,catch 捕獲異常揍障,有異常調(diào)用reject方法
try {
executor(resolve, reject);
} catch (error) {
reject(error);
}
}
Promise
狀態(tài)只能修改一次
原生功能
- 驗證原生
Promise
let p = new Promise((resolve, reject) => {
resolve("success");
reject("failed");
});
console.log(p);
- 結(jié)果:
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "success"
- 結(jié)論
Promise
狀態(tài)只能修改一次,所以要么是從 "pending" -> "fulfilled", 要么是 "pending" -> "rejected"俩由。之后就能修改了毒嫡。
代碼模擬實現(xiàn)
function Promise(executor) {
var _this = this;
this.PromiseState = "pending";
this.PromiseResult = undefined;
function resolve(data) {
// 如果不是'pending'才修改,如果是'pending'說明已經(jīng)修改過了采驻,就忽略
if (_this.PromiseState != 'pending') return;
_this.PromiseState = "fulfilled";
_this.PromiseResult = data;
}
function reject(data) {
// 如果不是'pending'才修改,如果是'pending'說明已經(jīng)修改過了匈勋,就忽略
if (_this.PromiseState != 'pending') return;
_this.PromiseState = "rejected";
_this.PromiseResult = data;
}
try {
executor(resolve, reject);
} catch (error) {
resolve(error);
}
}
Promise
對象的then
方法可以獲取Promise
結(jié)果
原生功能
- 驗證原生
Promise
let p = new Promise((resolve, reject) => {
resolve("success");
});
p.then((data) => {
console.log("第一個回調(diào)函數(shù)");
console.log(data);
}, (error) => {
console.log("第二個回調(diào)函數(shù)");
console.log(error);
});
- 結(jié)果:
第一個回調(diào)函數(shù)
success
- 結(jié)論
如果
Promise
的PromiseState
是fulfilled
礼旅,則將PromiseResult
作為實參調(diào)用then
函數(shù)的第一個函數(shù)參數(shù);
- 驗證原生
Promise
let p = new Promise((resolve, reject) => {
reject("failed");
});
p.then((data) => {
console.log("第一個回調(diào)函數(shù)");
console.log(data);
}, (error) => {
console.log("第二個回調(diào)函數(shù)");
console.log(error);
});
- 結(jié)果:
第二個回調(diào)函數(shù)
failed
- 結(jié)論
如果
Promise
的PromiseState
是rejected
洽洁,則將PromiseResult
作為實參調(diào)用then
函數(shù)的第二個函數(shù)參數(shù)痘系;
代碼模擬實現(xiàn)
Promise.prototype.then = function(onFulfilled, onRejected) {
var _this = this;
// 如果Promise的狀態(tài)是'fulfilled',將結(jié)果通過第一個函數(shù)參數(shù)傳遞出去饿自,
// 如果Promise的狀態(tài)是'rejected'汰翠,將結(jié)果通過第二個函數(shù)參數(shù)傳遞出去,
if (_this.PromiseState == 'fulfilled') {
onFulfilled(_this.PromiseResult);
} else if (_this.PromiseState == "rejected") {
onRejected(_this.PromiseResult);
}
}
Promise
對象的then
方法接收異步任務(wù)的結(jié)果
原生功能
- 驗證原生
Promise
let p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("success");
}, 2000);
});
p.then((data) => {
console.log("第一個回調(diào)函數(shù)");
console.log(data);
}, (error) => {
console.log("第二個回調(diào)函數(shù)");
console.log(error);
});
- 結(jié)果:
<!-- 過了兩秒再打印 -->
第一個回調(diào)函數(shù)
success
- 結(jié)論
如果
Promise
執(zhí)行的是異步任務(wù)昭雌,即調(diào)用then
方法時PromiseState
為pending
复唤,PromiseResult
為undefined
,先不回調(diào)結(jié)果烛卧,等PromiseResult
有值以后再回調(diào)結(jié)果佛纫。
代碼模擬實現(xiàn)
實現(xiàn)的邏輯就是如果暫時沒有結(jié)果,就先把回調(diào)函數(shù)保存起來总放,等有結(jié)果的時候再執(zhí)行回調(diào)函數(shù)呈宇。
function Promise(executor) {
var _this = this;
this.PromiseState = "pending";
this.PromiseResult = undefined;
// 定義一個變量保存回調(diào)函數(shù)
this.thenCbs = {};
function resolve(data) {
_this.PromiseState = "fulfilled";
_this.PromiseResult = data;
// 如果有保存狀態(tài)未改變時對應(yīng)的回調(diào)函數(shù)就調(diào)用
if (_this.thenCbs.onFulfilled !== undefined) {
_this.thenCbs.onFulfilled(data);
}
}
function reject(data) {
_this.PromiseState = "rejected";
_this.PromiseResult = data;
if (_this.thenCbs.onRejected !== undefined) {
_this.thenCbs.onRejected(data);
}
}
try {
executor(resolve, reject);
} catch (error) {
reject(error);
}
}
Promise.prototype.then = function(onFulfilled, onRejected) {
var _this = this;
if (_this.PromiseState == 'fulfilled') {
onFulfilled(_this.PromiseResult);
} else if (_this.PromiseState == "rejected") {
onRejected(_this.PromiseResult);
} else if (_this.PromiseState == 'pending') {
// 如果是異步任務(wù),此時還沒有結(jié)果局雄,只能先保存回調(diào)函數(shù)甥啄,等有結(jié)果后再進行函數(shù)調(diào)用
_this.thenCbs = {
onFulfilled,
onRejected
};
}
}
Promise
對象的then
方法可以多次調(diào)用
原生功能
- 驗證原生
Promise
let p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("success");
}, 2000);
});
p.then((data) => {
console.log("第一個回調(diào)函數(shù)");
console.log(data);
});
p.then(data => {
console.log("第二個回調(diào)函數(shù)");
console.log(data);
})
- 結(jié)果:
<!-- 過了兩秒再打印 -->
第一個回調(diào)函數(shù)
success
第二個回調(diào)函數(shù)
success
- 結(jié)論
對
Promise
多次調(diào)用then
方法獲取結(jié)果,對應(yīng)的多個回調(diào)函數(shù)都會執(zhí)行炬搭。
代碼模擬實現(xiàn)
同步任務(wù)不會有問題蜈漓,then
調(diào)用多次執(zhí)行多次,主要是異步任務(wù)需要修改宫盔。
function Promise(executor) {
var _this = this;
this.PromiseState = "pending";
this.PromiseResult = undefined;
// 保存回調(diào)函數(shù)的變量變?yōu)閿?shù)組
this.thenCbs = [];
function resolve(data) {
_this.PromiseState = "fulfilled";
_this.PromiseResult = data;
// 如果有保存狀態(tài)未改變時對應(yīng)的回調(diào)函數(shù)數(shù)組迎变,就遍歷調(diào)用
_this.thenCbs.forEach((item) => {
if (item.onFulfilled !== undefined) {
item.onFulfilled(data);
}
})
}
function reject(data) {
_this.PromiseState = "rejected";
_this.PromiseResult = data;
// 如果有保存狀態(tài)未改變時對應(yīng)的回調(diào)函數(shù)數(shù)組,就遍歷調(diào)用
_this.thenCbs.forEach((item) => {
if (item.onRejected !== undefined) {
item.onRejected(data);
}
})
}
try {
executor(resolve, reject);
} catch (error) {
reject(error);
}
}
Promise.prototype.then = function(onFulfilled, onRejected) {
var _this = this;
if (_this.PromiseState == 'fulfilled') {
onFulfilled(_this.PromiseResult);
} else if (_this.PromiseState == "rejected") {
onRejected(_this.PromiseResult);
} else if (_this.PromiseState == 'pending') {
// 如果是異步任務(wù)飘言,此時還沒有結(jié)果衣形,只能先保存回調(diào)函數(shù),等有結(jié)果后再進行函數(shù)調(diào)用
_this.thenCbs.push({
onFulfilled,
onRejected
});
}
}
Promise
對象的then
方法執(zhí)行后的返回結(jié)果是Promise對象
原生功能
- 驗證原生
Promise
let p1 = new Promise((resolve, reject) => {
resolve("success");
});
let res1 = p1.then((data) => {
}, (error) => {})
console.log(res1);
let res2 = p1.then((data) => {
return "normal success again"
})
console.log(res2);
let res3 = p1.then((data) => {
return new Promise((resolve, reject) => {
resolve("promise success again");
});
})
console.log(res3);
let res4 = p1.then((data) => {
return new Promise((resolve, reject) => {
reject("promise fail");
});
})
console.log(res4);
- 結(jié)果:
<!--res1-->
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: undefined
<!--res2-->
[PromiseState]]: "fulfilled"
[[PromiseResult]]: "normal success again"
<!--res3-->
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "promise success again"
<!--res4-->
[[PromiseState]]: "rejected"
[[PromiseResult]]: "promise fail"
- 結(jié)論
then
方法返回的是一個新的Promise
對象,這個Promise
對象的PromiseResult
由then
指定的回調(diào)函數(shù)返回值決定的谆吴;
p.then((data) => {}, (error) => {})
如果第一個函數(shù)(data) => {}
被調(diào)用就是這個函數(shù)的返回值決定了新的Promise
對象的PromiseResult
和PromiseState
倒源,如果第二個函數(shù)(error) => {}
被調(diào)用就是這個函數(shù)的返回值決定了新的Promise
對象的PromiseResult
和PromiseState
- 如果被調(diào)用的函數(shù)沒有返回值,則新的
Promise
對象的PromiseResult
為undefined
,PromiseState
為fulfilled
;- 如果被調(diào)用的函數(shù)有返回值但不是Promise句狼,則新的
Promise
對象的PromiseResult
為 函數(shù)的返回值,PromiseState
為fulfilled
;- 如果被調(diào)用的函數(shù)返回值是Promise笋熬,則新的
Promise
對象的PromiseResult
為 函數(shù)的返回值Promise的PromiseResult
,PromiseState
為 函數(shù)的返回值Promise的PromiseState
。
代碼模擬實現(xiàn)
Promise.prototype.then = function (onFulfilled, onRejected) {
var _this = this;
// 返回一個新的Promise對象,
return new Promise((resolve, reject) => {
// 定義一個處理then函數(shù)返回值的函數(shù)腻菇,這里就處理 onFulfilled 和 onRejected 兩個函數(shù)
let handleThenValue = (cb) => {
try {
// 得到成功的函數(shù)的返回結(jié)果
let result = cb(_this.PromiseResult);
// 如果這個函數(shù)的返回結(jié)果是Promise對象
if (result instanceof Promise) {
// 通過then獲取result這個Promise的結(jié)果和狀態(tài), 得到的結(jié)果就是新的Promise對象的結(jié)果和狀態(tài)
result.then(
(data) => {
resolve(data);
},
(error) => {
reject(error);
}
);
} else {
// 如果不是Promise對象胳螟,直接成功,結(jié)果為函數(shù)的返回值
resolve(result);
}
} catch (error) {
// 執(zhí)行錯誤就拋出異常
throw error;
}
};
if (_this.PromiseState == "fulfilled") {
// 處理 執(zhí)行 onFulfilled 的返回值
handleThenValue(onFulfilled);
} else if (_this.PromiseState == "rejected") {
// 處理 執(zhí)行 onRejected 的返回值
handleThenValue(onRejected);
} else if (_this.PromiseState == "pending") {
_this.thenCbs.push({
// 需要擴展筹吐,所以需要用另外加一層能函數(shù)對onFulfilled和onRejected進行封裝
onFulfilled: () => {
handleThenValue(onFulfilled)
},
onRejected: () => {
handleThenValue(onRejected)
},
});
}
});
};
Promise
對象的then
鏈?zhǔn)秸{(diào)用的異常穿透
原生功能
- 驗證原生
Promise
<!-- 1 -->
let p1 = new Promise((resolve, reject) => {
reject("error");
});
p1.then((data) => {
console.log(data);
}).catch((error) => {
console.log(error);
});
<!-- 2 -->
let p2 = new Promise((resolve, reject) => {
resolve("success");
})
p2.then((data) => {
throw "error"
}).then((data) => {
console.log(data);
}).catch((e) => {
console.log(e);
})
- 結(jié)果:
error
error
- 結(jié)論
中間
then
的鏈?zhǔn)秸{(diào)用過程中如果處理失敗的Promise
結(jié)果糖耸,在鏈?zhǔn)秸{(diào)用的最后調(diào)用catch
方法可以得到第一個出現(xiàn)錯誤的Promise
的結(jié)果。
代碼模擬實現(xiàn)
Promise.prototype.then = function (onFulfilled, onRejected) {
var _this = this;
// 如果沒傳onRejected就創(chuàng)建一個函數(shù)拋出異常丘薛,由于onRejected拋出異常會被捕獲嘉竟,最后會執(zhí)行reject(error);
if (typeof onRejected !== "function") {
onRejected = (e) => {
throw e;
};
}
return new Promise((resolve, reject) => {
let handleThenValue = (cb) => {
try {
let result = cb(_this.PromiseResult);
if (result instanceof Promise) {
result.then(
(data) => {
resolve(data);
},
(error) => {
reject(error);
}
);
} else {
resolve(result);
}
} catch (error) {
// 如果拋出異常,或者沒傳onRejected就會走這里
reject(error);
}
};
if (_this.PromiseState == "fulfilled") {
handleThenValue(onFulfilled);
} else if (_this.PromiseState == "rejected") {
handleThenValue(onRejected);
} else if (_this.PromiseState == "pending") {
_this.thenCbs.push({
onFulfilled: () => {
handleThenValue(onFulfilled)
},
onRejected: () => {
handleThenValue(onRejected)
},
});
}
});
};
// 添加Catch的方法
Promise.prototype.catch = function (onRejected) {
return this.then(undefined, onRejected);
};
Promise
對象的then
的值傳遞
原生功能
- 驗證原生
Promise
let p1 = new Promise((resolve, reject) => {
resolve("success");
});
p1.then()
.then((data) => {
console.log(data);
});
- 結(jié)果:
success
- 結(jié)論
如果
Promise
的PromiseState
是fulfilled
, 而then
函數(shù)沒有傳成功的函數(shù)洋侨,則then
函數(shù)返回的新Promise
對象的PromiseState
是fulfilled
舍扰,新Promise
對象的PromiseResult
是上個Promise的
PromiseResult`。總結(jié):p1.then()返回值 和 p1 的
PromiseResult
和PromiseState
一樣希坚。
代碼模擬實現(xiàn)
Promise.prototype.then = function (onFulfilled, onRejected) {
// 內(nèi)容不變省略
// 如果沒傳值就造一個默認(rèn)的函數(shù), 把成功的值直接傳遞下去
if (typeof onFulfilled !== 'function') {
onFulfilled = value => value;
}
return new Promise((resolve, reject) => {
// 內(nèi)容不變省略
});
};
Promise
的resolve
方法
原生功能
- 驗證原生
Promise
let p1 = Promise.resolve("1");
let p2 = Promise.resolve();
let p3 = Promise.resolve(new Promise((resolve, reject) => {
reject("fail");
}));
console.log(p1);
console.log(p2);
console.log(p3);
- 結(jié)果:
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "1"
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: undefined
[[Prototype]]: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: "fail"
- 結(jié)論
Promise.resolve
可以用來構(gòu)建一個Promise
對象边苹;- 如果傳入的參數(shù)不是
Promise
對象,則創(chuàng)建的Promise
對象PromiseState
為fulfilled
,
PromiseResult
為傳入的參數(shù)裁僧;
- 如果傳入的參數(shù)是
Promise
對象勾给,這創(chuàng)建的Promise
對象和參數(shù)的屬性一致。
代碼模擬實現(xiàn)
Promise.resolve = function(params) {
// 返回一個新的Promise對象
return new Promise((resolve, reject) => {
// 如果傳入的是Promise對象锅知,則狀態(tài)和結(jié)果和參數(shù)一致
if (params instanceof Promise) {
params.then((data) => {
resolve(data);
}, (error) => {
reject(error)
});
} else {
// 如果傳入的不是Promise對象,直接成功售睹,成功的結(jié)果是傳入的參數(shù)
resolve(params);
}
});
}
Promise
的reject
方法
原生功能
- 驗證原生
Promise
let p1 = Promise.reject("1");
let p2 = Promise.reject();
let p3 = Promise.reject(new Promise((resolve, reject) => {
resolve("success");
}));
console.log(p1);
console.log(p2);
console.log(p3);
- 結(jié)果:
[[Prototype]]: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: "1"
[[Prototype]]: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: undefined
[[Prototype]]: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: Promise
- 結(jié)論
總是返回一個失敗的Promise對象昌妹,
PromiseResult
為傳入的參數(shù)
代碼模擬實現(xiàn)
Promise.reject = function(params) {
console.log(params.PromiseState);
return new Promise((resolve, reject) => {
reject(params);
});
}
Promise
的all
方法
原生功能
- 驗證原生
Promise
let p1 = Promise.resolve("1");
let p2 = Promise.resolve("2");
let p3 = Promise.resolve(new Promise((resolve, reject) => {
resolve("success");
}));
let p4 = Promise.reject("fail");
Promise.all([p1, p2, p3]).then((data) => {
console.log(data);
}, (error) => {
console.warn(error);
});
Promise.all([p1, p2, p4]).then((data) => {
console.log(data);
}, (error) => {
console.warn(error);
});
- 結(jié)果:
[1,2,"success"]
fail
- 結(jié)論
Promise.all
返回一個新的Promise
對象捶枢,Promise
數(shù)組參數(shù)如果最后狀態(tài)都變?yōu)?code>fulfilled , 則返回一個數(shù)組,新的Promise
對象的PromiseResult
為一個數(shù)組烂叔,數(shù)組中的值是Promise
的PromiseResult
;Promise.all
返回一個新的Promise
對象固歪,Promise
數(shù)組參數(shù)如果有一個變?yōu)?code>rejected , 則新的Promise
對象PromiseState
變?yōu)?code>rejected蒜鸡,PromiseResult
為失敗的Promise
的PromiseResult
胯努;
代碼模擬實現(xiàn)
Promise.all = function(arr) {
return new Promise((resolve, reject) => {
try {
let resultArr = [];
let count = 0;
// 遍歷Promise對象
arr.forEach((item, index) => {
// 取每個Promise的值
item.then((data) => {
// 成功就記錄下來
resultArr[index] = data;
count ++;
// 如果都成功了逢防,就該狀態(tài)
if (count == arr.length) {
resolve(resultArr);
}
}, (error) => {
// 只要有一個失敗就失敗
reject(error);
})
});
} catch (error) {
reject(error);
}
});
}
Promise
的race
方法
race
傳入一個Promsie
數(shù)組忘朝,返回一個新的Promsie
對象。新的Promsie
對象的PromiseState
和PromiseResult
由最先完成的那個Promise
決定溉箕。
代碼模擬實現(xiàn)
Promise.race = function(arr) {
return new Promise((resolve, reject) =>{
try {
// 誰先改變狀態(tài)誰來決定返回的結(jié)果
arr.forEach((item) => {
item.then((data) => {
resolve(data);
}, (error) =>{
reject(error);
})
})
} catch (error) {
reject(error);
}
});
}
Promise
對象的finally
方法
原生功能
- 驗證原生
Promise
let p1 = new Promise((resolve, reject) => {
resolve("success");
});
p1.then((data) => {
console.log("success called:", data);
}, (e) => {
console.log(e);
})
.finally((a) => {
console.log("finally called");
})
let p2 = new Promise((resolve, reject) => {
reject("failed");
})
p2.then((data) => {
console.log(data);
}, (e) => {
console.log("error called:", e);
})
.finally((a) => {
console.log("finally called");
})
- 結(jié)果:
success called: success
finally called
error called: failed
finally called
- 結(jié)論
Promise
無論是成功還是失敗悦昵,在PromiseState
變化后都會調(diào)用finally
方法旱捧。
finally
方法的返回值也是值傳遞踩麦。即p.finally()
返回值 和p
的PromiseResult
和PromiseState
一樣。
代碼模擬實現(xiàn)
Promise.prototype.finally = function(onFinally) {
// 構(gòu)造兩個回調(diào)函數(shù)贫橙,
return this.then(
function(data) {
// 這里先執(zhí)行onFinally函數(shù)卢肃,然后返回原來的值
return Promise.resolve(onFinally()).then((data) => data);
},
function(error) {
// 這里先執(zhí)行onFinally函數(shù)才顿,然后拋出錯誤
return Promise.resolve(onFinally()).then(() => {throw error});
}
)
}
完成
function Promise(executor) {
var _this = this;
this.PromiseState = "pending";
this.PromiseResult = undefined;
this.thenCbs = [];
function resolve(data) {
_this.PromiseState = "fulfilled";
_this.PromiseResult = data;
_this.thenCbs.forEach((item) => {
if (item.onFulfilled !== undefined) {
item.onFulfilled(data);
}
});
}
function reject(data) {
_this.PromiseState = "rejected";
_this.PromiseResult = data;
_this.thenCbs.forEach((item) => {
if (item.onRejected !== undefined) {
item.onRejected(data);
}
});
}
try {
executor(resolve, reject);
} catch (error) {
reject(error);
}
}
Promise.prototype.then = function (onFulfilled, onRejected) {
var _this = this;
if (typeof onRejected !== "function") {
onRejected = (e) => {
throw e;
};
}
if (typeof onFulfilled !== 'function') {
onFulfilled = value => value;
}
return new Promise((resolve, reject) => {
let handleThenValue = (cb) => {
try {
let result = cb(_this.PromiseResult);
if (result instanceof Promise) {
result.then(
(data) => {
resolve(data);
},
(error) => {
reject(error);
}
);
} else {
resolve(result);
}
} catch (error) {
reject(error);
}
};
if (_this.PromiseState == "fulfilled") {
handleThenValue(onFulfilled);
} else if (_this.PromiseState == "rejected") {
handleThenValue(onRejected);
} else if (_this.PromiseState == "pending") {
_this.thenCbs.push({
onFulfilled: () => {
handleThenValue(onFulfilled)
},
onRejected: () => {
handleThenValue(onRejected)
},
});
}
});
};
Promise.prototype.catch = function (onRejected) {
return this.then(undefined, onRejected);
};
Promise.prototype.finally = function(onFinally) {
return this.then(
function(data) {
return Promise.resolve(onFinally()).then((data) => data);
},
function(error) {
return Promise.resolve(onFinally()).then(() => {throw error});
}
)
}
Promise.resolve = function(params) {
return new Promise((resolve, reject) => {
if (params instanceof Promise) {
params.then((data) => {
resolve(data);
}, (error) => {
reject(error)
});
} else {
resolve(params);
}
});
}
Promise.reject = function(params) {
return new Promise((resolve, reject) => {
reject(params);
});
}
Promise.all = function(arr) {
return new Promise((resolve, reject) => {
try {
let resultArr = [];
let count = 0;
arr.forEach((item, index) => {
item.then((data) => {
resultArr[index] = data;
count ++;
if (count == arr.length) {
resolve(resultArr);
}
}, (error) => {
reject(error);
})
});
} catch (error) {
reject(error);
}
});
}