JS_Promise底层原理封装
封装的难点在于如何让promise中的.then()变成一个微任务 ? 如何实现多次.then() ?
关于微任务与宏任务、同步和异步的介绍，可以参考之前的文章 JS_微任务与宏任务
- 封装时需要注意的问题：
Promise有3种PromiseStatus状态值：PENDING/FULFLLED/REJECTED
判断Promise的参数必须是一个函数
执行Promise的回调函数时，要将this的指向由window改为当前的Promise
在回调函数调用之前，定义初始的状态值PENDING，一旦调用便改变它
在resolve和reject执行时，更改PromistStatus
考虑Promise中的函数是异步时，.then()中要接收resolve()传来的参数：提前定义接收事件函数的队列，由于.then是先执行，所以在.then中将要执行的函数添加的事件队列中，在执行异步中的resolve时再清空事件队列。(如此便将.then伪装成了微任务)
再考虑Promise中不存在异步时，.then后执行，由于步骤6的操作会导致，执行resolve时的事件队列为空。此时，将resolve放在异步中执行即可。
当Promise语句之前存在异步时，它会在Promise中的异步resolve之前执行。因此，还要将resolve中的宏任务变为微任务。（通过message）
Promise之后，允许无限地执行连缀.then()，所以.then()中要返回新的Promise，并且调用resolve便于下一次执行.then
由于步骤9的执行，在第二次.then之后，又产生了之前同样的问题：.then中的函数先执行了：向世界队列里添加一个新的函数：在函数中传入resolve的参数，控制执行顺序。
考虑.then中可以有返回值。在事件队列的函数中，将结果传给下一个resolve。
如果.then中返回一个新的Promise，要判断步骤11中的返回值是数值还是新的Promise。
Promise.race()/all()……暂时先不考虑了
class LxcPromise {
//Promise的三个状态
static PENDING = "PENDING";
static FULFLLED = "FULFLLED";
static REJECTED = "REJECTED"
constructor(handler) {
// 当实例化promise的时候如果没有传递回调参数，则抛出异常 。，
if (typeof handler !== "function")
throw new TypeError("Promise resolver undefined is not a function");
// 接收resolve||reject的参数
this.params;
// 定义接收事件函数的队列
this.resolveEventList = [];
this.rejectEventList = [];
// 1.定义初始的状态值
this.status = LxcPromise.PENDING;
// 2.调用回调，this如果不改的话，会指向window
handler(this._resolve.bind(this), this._reject.bind(this))
}
_resolve(val) {
// onmessage是一个微任务
window.addEventListener("message", _ => {
// 3-1更改状态
if (this.status !== LxcPromise.PENDING) return;
this.status = LxcPromise.FULFLLED;
this.params = val;
// 5.当resolve执行的时候，调用事件队列中的函数
let handler;
// console.log(this.resolveEventList)
while (handler = this.resolveEventList.shift()) {
handler(this.params);//这里的params是实参
}
})
window.postMessage("");//用来触发Message函数
}
_reject(val) {
// 3-2更改状态
if (this.status !== LxcPromise.PENDING) return;
this.status = LxcPromise.REJECTED;
this.params = val;
let handler;
while (handler = this.rejectEventList.shift()) {
handler(this.params);
}
}
// 4. 将then中的函数添加到对应的事件队列中
then(resolveSucc, rejectError) {
// 实现无限.then
return new LxcPromise((resolve, reject) => {
function newResolveSucc(params) {//这里的params是形参
var val = resolveSucc(params);
if (val instanceof LxcPromise) {
val.then(resolve, reject)
} else {
resolve(val);
}
}
function newRejectError(params) {
var val = rejectError(params);
if (val instanceof LxcPromise) {
val.then(resolve, reject)
} else {
reject(val);
}
}
if (typeof resolveSucc === "function") {
this.resolveEventList.push(newResolveSucc);
}
if (typeof rejectError === "function") {
this.rejectEventList.push(newRejectError)
}
})
}
}
new LxcPromise((resolve, reject) => {
setTimeout(() => {
console.log(111);
resolve("lxc");
})
}).then((data) => {
console.log(data);
//return 123;
return new LxcPromise((resolve, reject) => {
resolve("333");
});
}).then((data) => {
console.log("222", data);
}).then(() => {
console.log("444")
})
- 运行结果
