最近看了些javascript里面Promise關(guān)鍵字的內(nèi)部實(shí)現(xiàn)的文章绍傲，也試著自己實(shí)現(xiàn)了一下Promise色解，在這里做一些相關(guān)記錄根悼。
Promise是一個(gè)可以在未來(lái)某個(gè)時(shí)間點(diǎn)返回異步操作結(jié)果的對(duì)象却音。這個(gè)結(jié)果可以是成功resolved解析得到的值楞抡，也可以是resovled解析過(guò)程中出錯(cuò)的原因瓢湃。它在執(zhí)行過(guò)程中有3種狀態(tài)：
- Fulfilled 完成并正確解析結(jié)果狀態(tài)（調(diào)用resolve()）
- Rejected 完成但是結(jié)果解析錯(cuò)誤狀態(tài) (調(diào)用reject())
- Pending 既沒(méi)有完成也沒(méi)有拒絕
Promise內(nèi)部則是通過(guò)定義一組狀態(tài)機(jī)的方式來(lái)管理三個(gè)生命周期的切換理张，所以第一步先定義狀態(tài)機(jī)的基本結(jié)構(gòu)
function PromiseDemo() {
this.PENDING = 0;
this.FULFILLED = 1;
this.REJECTED = 2;
this.handlers = [];
this.state = this.PENDING; // 初始化Promise的狀態(tài)，最初的狀態(tài)為PENDING
this.value = null; // 存儲(chǔ)狀態(tài)變?yōu)镕ULFILLED或者REJECTED之后的值
const fulfilled = (result) => {
this.state = this.FULFILLED;
this.value = result;
};
const rejected = (error) => {
this.state = this.REJECTED;
this.value = error;
};
}
現(xiàn)在已經(jīng)定義好了Promise的狀態(tài)機(jī)绵患，對(duì)于Promise來(lái)說(shuō)雾叭，當(dāng)它的狀態(tài)不是pending的時(shí)候說(shuō)明它已經(jīng)處于完成狀態(tài)（已經(jīng)被resolve或者rejected了）。一旦Promise的狀態(tài)從pending進(jìn)行了切換（調(diào)用resolve或者reject）落蝙，那么它將不會(huì)再被改變织狐，這時(shí)再次調(diào)用resolve或者reject是沒(méi)有效果的。這種保持完成狀態(tài)的穩(wěn)定性是Promise重要的一個(gè)特性筏勒。
標(biāo)準(zhǔn)Promise定義的實(shí)現(xiàn)是通過(guò)Promises/A+ specification
)社區(qū)制定的規(guī)范移迫，簡(jiǎn)單概括一下Promise的實(shí)現(xiàn)大概需要遵從以下的規(guī)則：
- 一個(gè)Promise是一個(gè)能夠提供符合標(biāo)準(zhǔn)
.then()方法的對(duì)象 - pending狀態(tài)的Promise可以過(guò)渡到fulfilled或者rejected狀態(tài)
- fulfilled或者rejected狀態(tài)的Promise完成以后不能再過(guò)度到任何其他狀態(tài)
- 一旦Promise執(zhí)行完成，它必須要有一個(gè)值（可能是undefined）管行，這個(gè)值不能被改變
遵從這幾個(gè)原則厨埋，在定義Promise狀態(tài)機(jī)的時(shí)候便定義了它的三個(gè)狀態(tài)，以及過(guò)度的到fulfilled和rejected的方法fulfill()和reject()
現(xiàn)在過(guò)渡Promise狀態(tài)的方法有了病瞳，那么對(duì)于調(diào)用的人來(lái)說(shuō)它是在什么地方進(jìn)行更改的呢揽咕？先來(lái)看一個(gè)使用Promise的例子
const wait = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('hello');
},0)
})
}
wait().then((result) => {
console.log(result); // hello
})
在wait函數(shù)中有setTimeout這樣的異步操作，通過(guò)使用Promise去包裝這個(gè)異步操作套菜，然后當(dāng)里面的異步操作結(jié)束之后調(diào)用resolve或者reject來(lái)獲取異步操作結(jié)束后的值亲善。所以這里是通過(guò)實(shí)例化Promise時(shí)傳入的回調(diào)來(lái)觸發(fā)狀態(tài)更改的。現(xiàn)在來(lái)給傳入的這個(gè)回調(diào)定義resolve和reject
/**
*@params { fn } promise 實(shí)例化傳入的回調(diào)用來(lái)接收resolve和reject
*/
function PromiseDemo(fn) {
this.PENDING = 0;
this.FULFILLED = 1;
this.REJECTED = 2;
this.handlers = []; // 存放.then里面的success或者failure的異步操作
this.state = PENDING; // 初始化Promise的狀態(tài)逗柴，最初的狀態(tài)為PENDING
this.value = null; // 存儲(chǔ)狀態(tài)變?yōu)镕ULFILLED或者REJECTED之后的值
/**
* 執(zhí)行.then()兩個(gè)onFulfilled和onRejected異步處理操作的執(zhí)行函數(shù)
*/
const handler = (handle) => {
if (this.state === this.PENDING) {
this.handlers.push(handle);
} else {
if (
this.state === this.FULFILLED &&
typeof handle.onFulfilled === "function"
) {
handle.onFulfilled(this.value);
}
if (
this.state === this.REJECTED &&
typeof handle.onRejected === "function"
) {
handle.onRejected(this.value);
}
}
};
const fulfilled = (result) => {
this.state = this.FULFILLED;
this.value = result;
this.handlers.forEach(handler);
this.handlers = null;
};
const rejected = (error) => {
this.state = this.REJECTED;
this.value = error;
this.handlers.forEach(handler);
this.handlers = null;
};
function resolve(value) {// fulfill執(zhí)行過(guò)程中如果發(fā)生錯(cuò)誤蛹头，則需要切換到REJECTED狀態(tài)
try {
fulfilled(value);
}catch(err) {
rejected(err);
}
}
// 傳入外部調(diào)用Promise時(shí)的resolve和reject方法
fn( (result) => {
try {
fulfilled(result);
} catch (error) {
rejected(error);
}
},
(error) => {
rejected(error);
})
this.done = (onFulfilled, onRejected) => {
// 確保結(jié)果處理操作和Promise內(nèi)部的異步操作保持異步
setTimeout(() => {
handler({ onFulfilled,onRejected })
}, 0)
}
這里用setTimeout是為了保證Promise內(nèi)部的操作都是異步，也就是說(shuō)當(dāng)我們?cè)赑romise內(nèi)部傳入的沒(méi)有異步操作時(shí)也能保證它異步輸出，但是一般沒(méi)有異步操作也不會(huì)使用Promise
這里實(shí)現(xiàn)的.done方法主要是給.then方法使用渣蜗。.then做的事情和.done是一樣的屠尊，都是為了輸出異步操作的結(jié)果，只是.then在執(zhí)行的時(shí)候會(huì)在進(jìn)程里面重新構(gòu)造一個(gè)Promise耕拷。我們通常會(huì)這樣調(diào)用.then
promise.then(
onFulfilled?: Function,
onRejected?: Function
) => Promise
根據(jù)Promises/A+的實(shí)現(xiàn)讼昆，.then需要遵從以下規(guī)則：
-
onFulfilled()和onRejected()是可選參數(shù) - 如果
onFulfilled或者onRejected()不是函數(shù)，它們將會(huì)被忽略掉 -
onFulfilled()會(huì)在Promise的狀態(tài)為fulfilled的時(shí)候調(diào)用骚烧，并使用Promsie異步操作的value作為它的第一個(gè)參數(shù)浸赫，它不能在Promise還沒(méi)有過(guò)渡到fulfilled狀態(tài)之前被調(diào)用 -
onRejected()會(huì)在Promise的狀態(tài)為rejected的時(shí)候調(diào)用，并使用過(guò)渡到rejected的異常原因作為第一個(gè)參數(shù)赃绊，它不能在Promise還沒(méi)有過(guò)渡到rejected狀態(tài)之前被調(diào)用 -
onFulfilled()和onRejected()都不能調(diào)用超過(guò)一次 -
.then()可以在一個(gè)Promise里面被調(diào)用很多次既峡，當(dāng)Promise處于fulfilled狀態(tài)，所有各自的onFullfilled()回調(diào)都必須按照它們?cè)?code>.then調(diào)用里面的順序執(zhí)行碧查。同樣當(dāng)Promise處于rejected狀態(tài)运敢，所有各自的onRejected()回調(diào)必須按照它們?cè)?code>.then調(diào)用里面的順序執(zhí)行 -
.then()必須要返回一個(gè)PromisePromise2 = Promise1.then(onFulfilled, onRejected)- 如果
onFulfilled()或者onRejected()返回一個(gè)x值，并且x是一個(gè)Promise, 那么Promise2將會(huì)和x的狀態(tài)以及value保持一致忠售，否則Promise2會(huì)以x的值切換到fulfilled狀態(tài) - 如果
onFulfilled()或者onRejected()拋出一個(gè)異常e传惠，promise2必須過(guò)渡到rejected狀態(tài)，并且使用e作為理由 - 如果
onFulfilled()不是一個(gè)函數(shù)并且promise1過(guò)渡到fulfilled狀態(tài)档痪，promise2必須要使用和promise1同樣的值過(guò)渡到fulfilled狀態(tài)
- 如果
- 如果
onRejected()不是一個(gè)函數(shù)并且promise1過(guò)渡到rejected狀態(tài)涉枫，promise2必須要使用和promise1同樣的異常原因過(guò)渡到rejected狀態(tài)
遵從以上.then()的原則，現(xiàn)在先來(lái)簡(jiǎn)單實(shí)現(xiàn)一下.then()
this.then = (onFulfilled, onRejected) => {
return new Promise((resolve, reject) => {
this.done((result) => {
if(typeof onFulfilled === 'function') {
// 這里使用這么多的回調(diào)是為了在結(jié)果處理的回調(diào)里面能夠拿到異步操作的結(jié)果值
try {
resolve(onFulfilled(result));
}catch(err) {
reject(err);
}
}else {
resolve(result);
}
}, (err) => {
if(typeof onRejected === 'function') {
try {
resolve(onRejected(err));
}catch(ex) {
reject(ex);
}
}else {
reject(err);
}
})
})
}
上面的Promise還有一個(gè)地方?jīng)]有實(shí)現(xiàn)腐螟，就是在.then里面有新的異步操作，又使用Promise去包裝操作之后困后，在下一個(gè).then()里面需要接收到這個(gè)異步操作的結(jié)果乐纸。也就是上面提到的.then()原則的倒數(shù)第二條。首先需要將fn()的調(diào)用封裝一下摇予，同時(shí)需要添加一個(gè)getThen()的輔助函數(shù)用于獲取.then()里面的異步操作
/**
* 檢查value值是不是Promise汽绢，如果是的話返回這個(gè)promise的.then方法
*
*/
const getThen = (value) => {
const t = typeof value;
if (t && (t === "object" || t === "function")) {
const then = value.then;
if (typeof then === "function") {
console.log('functionThen', then);
return then;
}
}
return null;
};
const doResolve = (fn, onFulfilled, onRejected) => {
try {
fn(
(result) => {
try {
onFulfilled(result);
} catch (error) {
onRejected(error);
}
},
(error) => {
onRejected(error);
}
);
} catch (error) {
onRejected(error);
}
};
const resolve = (result) => {
try {
const then = getThen(result);
if (then) {
doResolve(then, resolve, rejected);
return;
}
fulfilled(result);
} catch (error) {
rejected(error);
}
};
完整代碼實(shí)現(xiàn)：
function MyPromise(fn) {
this.PENDING = 0;
this.FULFILLED = 1;
this.REJECTED = 2;
this.handlers = [];
this.state = this.PENDING;
this.value = null;
const handler = (handle) => {
if (this.state === this.PENDING) {
this.handlers.push(handle);
} else {
if (
this.state === this.FULFILLED &&
typeof handle.onFulfilled === "function"
) {
handle.onFulfilled(this.value);
}
if (
this.state === this.REJECTED &&
typeof handle.onRejected === "function"
) {
handle.onRejected(this.value);
}
}
};
const fulfilled = (result) => {
this.state = this.FULFILLED;
this.value = result;
this.handlers.forEach(handler);
this.handlers = null;
};
const rejected = (error) => {
this.state = this.REJECTED;
this.value = error;
this.handlers.forEach(handler);
this.handlers = null;
};
/**
* 檢查value值是不是Promise，如果是的話返回這個(gè)promise的.then方法
*
*/
const getThen = (value) => {
const t = typeof value;
if (t && (t === "object" || t === "function")) {
const then = value.then;
if (typeof then === "function") {
console.log('functionThen', then);
return then;
}
}
return null;
};
const doResolve = (fn, onFulfilled, onRejected) => {
try {
fn(
(result) => {
try {
onFulfilled(result);
} catch (error) {
onRejected(error);
}
},
(error) => {
onRejected(error);
}
);
} catch (error) {
onRejected(error);
}
};
const resolve = (result) => {
try {
const then = getThen(result);
if (then) {
doResolve(then, resolve, rejected);
return;
}
fulfilled(result);
} catch (error) {
rejected(error);
}
};
doResolve(fn, resolve, rejected);
this.done = (onFulfilled, onRejected) => {
// 確保promise內(nèi)部的操作都是異步
setTimeout(() => {
handler({ onFulfilled, onRejected });
}, 0);
};
this.then = (onFulfilled, onRejected) => {
return new MyPromise((resolve, reject) => {
return this.done(
(value) => {
if (typeof onFulfilled === "function") {
// 這里使用這么多的回調(diào)是為了在結(jié)果處理的回調(diào)里面能夠拿到異步操作的結(jié)果值
try {
return resolve(onFulfilled(value));
} catch (error) {
return reject(error);
}
} else {
return resolve(value);
}
},
(error) => {
if (typeof onRejected === "function") {
try {
return resolve(onRejected(error));
} catch (error) {
return reject(error);
}
} else {
return reject(error);
}
}
);
});
};
}
exports.myPromise = MyPromise;
總結(jié)
- Promise內(nèi)部通過(guò)定義狀態(tài)機(jī)來(lái)實(shí)現(xiàn)pending, fulfilled, rejected三中狀態(tài)的過(guò)渡侧戴。pending狀態(tài)為處理內(nèi)部異步操作宁昭，fulfilled和rejected為異步操作結(jié)束后輸出處理成功的結(jié)果，以及失敗的原因
- Promise需要具有符合PromiseA+規(guī)范的標(biāo)準(zhǔn)
.then()方法酗宋，用于對(duì)Promise異步輸出的結(jié)果進(jìn)行處理积仗。
