es6中 --使用 js 实现原生Promise

2020-03-25  本文已影响0人  SystemLight

代码实现

class MyPromise {

    constructor(callback) {
        this.resolveHandlers = [];
        this.rejectHandlers = [];

        this.status = "pending";

        callback(this._resolve, this._reject);
    }

    _reject = (val) => {
        if (this.status !== "pending") {
            return;
        }
        this.status = "rejected";
        this.observer(() => {
            // 推入微任务队列
            while (this.rejectHandlers.length) {
                this.rejectHandlers.shift()(val);
            }
        });
    };

    _resolve = (val) => {
        if (this.status !== "pending") {
            return;
        }
        this.status = "resolved";
        this.observer(() => {
            // 推入微任务队列
            while (this.resolveHandlers.length) {
                this.resolveHandlers.shift()(val);
            }
        });
    };

    observer(microTask) {
        let ob = new MutationObserver(function () {
            microTask();
            ob.disconnect();
            ob = null;
        });
        ob.observe(document.body, {
            attributes: true
        });
        document.body.setAttribute("promise", Math.random().toString());
    }

    then(resolveTask, rejectTask) {
        // return nextMyPromise
        let nowMyPromise = this;
        return new MyPromise((nextResolve, nextReject) => {

            nowMyPromise.resolveHandlers.push(nowResolveVal => {
                if (typeof resolveTask === "function") {
                    nowResolveVal = resolveTask(nowResolveVal);
                    // 返回一个MyPromise对象时
                    if (nowResolveVal instanceof MyPromise) {
                        return nowResolveVal.then(nextResolve, nextReject)
                    }
                    // 返回一个thenable对象时,即含有then函数的对象时,用于替换掉底下通过then方法注册的resolveTask
                    if (typeof nowResolveVal === "object" && typeof nowResolveVal.then === "function") {
                        return nowResolveVal.then();
                    }
                }
                nextResolve(nowResolveVal);
            });

            nowMyPromise.rejectHandlers.push(nowRejectVal => {
                if (typeof rejectTask === "function") {
                    nowRejectVal = rejectTask(nowRejectVal);
                    // 返回一个MyPromise对象时
                    if (nowRejectVal instanceof MyPromise) {
                        return nowRejectVal.then(nextResolve, nextReject)
                    }
                    // 返回一个thenable对象时,即含有then函数的对象时,用于替换掉底下通过then方法注册的resolveTask
                    if (typeof nowRejectVal === "object" && typeof nowRejectVal.then === "function") {
                        return nowRejectVal.then();
                    }
                }
                nextReject(nowRejectVal);
            });

        });
    }

    catch(rejectTask) {
        return this.then(undefined, rejectTask);
    }

    finally(finallyTask) {
        let __finally = (val) => {
            finallyTask();
            return val;
        };
        return this.then(__finally, __finally);
    }

    static resolve(val) {
        return new MyPromise((resolve, reject) => {
            resolve(val);
        })
    }

    static reject(val) {
        return new MyPromise((resolve, reject) => {
            reject(val);
        })
    }

    static all(promiseList) {
        let resultList = [];
        let n = 0;
        let size = promiseList.length;
        return new MyPromise((resolve, reject) => {
            for (let i = 0; i < promiseList.length; i++) {
                promiseList[i].then(val => {
                    n++;
                    resultList[i] = val;
                    if (n === size) {
                        resolve(resultList);
                    }
                });
            }
        });
    }

}

更多推荐:https://github.com/januwA/future.js

上一篇 下一篇

猜你喜欢

热点阅读