JS_Promise底层原理封装

JS_Promise底层原理封装

封装的难点在于如何让promise中的.then()变成一个微任务 ? 如何实现多次.then() ?

关于微任务与宏任务、同步和异步的介绍，可以参考之前的文章 JS_微任务与宏任务

• 封装时需要注意的问题：

1. Promise有3种PromiseStatus状态值：PENDING/FULFLLED/REJECTED

2. 判断Promise的参数必须是一个函数

3. 执行Promise的回调函数时，要将this的指向由window改为当前的Promise

4. 在回调函数调用之前，定义初始的状态值PENDING，一旦调用便改变它

5. 在resolve和reject执行时，更改PromistStatus

6. 考虑Promise中的函数是异步时，.then()中要接收resolve()传来的参数：提前定义接收事件函数的队列，由于.then是先执行，所以在.then中将要执行的函数添加的事件队列中，在执行异步中的resolve时再清空事件队列。(如此便将.then伪装成了微任务)

7. 再考虑Promise中不存在异步时，.then后执行，由于步骤6的操作会导致，执行resolve时的事件队列为空。此时，将resolve放在异步中执行即可。

8. 当Promise语句之前存在异步时，它会在Promise中的异步resolve之前执行。因此，还要将resolve中的宏任务变为微任务。（通过message）

9. Promise之后，允许无限地执行连缀.then()，所以.then()中要返回新的Promise，并且调用resolve便于下一次执行.then

10. 由于步骤9的执行，在第二次.then之后，又产生了之前同样的问题：.then中的函数先执行了：向世界队列里添加一个新的函数：在函数中传入resolve的参数，控制执行顺序。

11. 考虑.then中可以有返回值。在事件队列的函数中，将结果传给下一个resolve。

12. 如果.then中返回一个新的Promise，要判断步骤11中的返回值是数值还是新的Promise。

13. 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")
})

• 运行结果

promise.png