手写Promise

1.声明promise类并且绑定this

class myPromise {
    static PENDDING = "pendding";
    static FULFILLED = "fulfilled";
    static REJECTED = "rejected";

    constructor(executor) {
        this.status = myPromise.PENDDING;
        this.value = null;
        executor(this.resolve.bind(this), this.rejectud.bind(this));
    }
    resolve(value) {
        this.status = myPromise.FULFILLED;
        this.value = value;
    }
    rejectud(reason) {
        this.status = myPromise.REJECTED;
        this.value = reason;
    }
}

存在问题：从状态变为成功态后还可以二次改变

2.状态保护和执行者异步捕获

class myPromise {
    static PENDDING = "pendding";
    static FULFILLED = "fulfilled";
    static REJECTED = "rejected";
 
    constructor(executor) {
        this.status = myPromise.PENDDING;
        this.value = null;
        try{
            executor(this.resolve.bind(this), this.rejectud.bind(this));
        }catch(err){
            this.rejectud(err);
        }     
    }

    resolve(value) {
        if(this.status==myPromise.PENDDING){
            this.status = myPromise.FULFILLED;
             this.value = value;
        }
    }

    rejectud(reason) {
        if(this.status==myPromise.PENDDING){
        this.status = myPromise.REJECTED;
        this.value = reason;
        }
    }
}

3.THEN的基础构建

class myPromise {
    static PENDDING = "pendding";
    static FULFILLED = "fulfilled";
    static REJECTED = "rejected";
    
    constructor(executor) {
        this.status = myPromise.PENDDING;
        this.value = null;
        try{
            executor(this.resolve.bind(this), this.rejectud.bind(this));
        }catch(err){
            this.rejectud(err);
        }     
    }
    resolve(value) {
        if(this.status==myPromise.PENDDING){
            this.status = myPromise.FULFILLED;
             this.value = value;
        }
    }
    rejectud(reason) {
        if(this.status==myPromise.PENDDING){
        this.status = myPromise.REJECTED;
        this.value = reason;
        }
    }
    //可以完成第一次then但是不能链式调用
    then(onFulfilled,onRejected){
        if(typeof onFulfilled !== "function"){
            onFulfilled= ()=>{}
        }
        if(typeof onRejected !== "function"){
            onRejected= ()=>{}
        }
        if(this.status=myPromise.FULFILLED){
            onFulfilled(this.value);
        }
        if(this.status=myPromise.REJECTED){
            onREJECTED(this.value);
        }
    }
}

 

4.实现then的异步操作和异步捕获

class myPromise {
    static PENDDING = "pendding";
    static FULFILLED = "fulfilled";
    static REJECTED = "rejected";

    constructor(executor) {
        this.status = myPromise.PENDDING;
        this.value = null;
        try {
            executor(this.resolve.bind(this), this.rejectud.bind(this));
        } catch (err) {
            this.rejectud(err);
        }
    }
    resolve(value) {
        if (this.status == myPromise.PENDDING) {
            this.status = myPromise.FULFILLED;
            this.value = value;
        }
    }
    rejectud(reason) {
        if (this.status == myPromise.PENDDING) {
            this.status = myPromise.REJECTED;
            this.value = reason;
        }
    }
    //可以完成第一次then但是不能链式调用
    then(onFulfilled, onRejected) {
        if (typeof onFulfilled !== "function") {
            onFulfilled = () => { }
        }
        if (typeof onRejected !== "function") {
            onRejected = () => { }
        }
        if (this.status == myPromise.FULFILLED) {
            //放到setTimeout中，改为异步操作
            setTimeout(() => {
                try {
                    onFulfilled(this.value);
                } catch (error) {
                    onRejected(error);
                }
            });
        }
        if (this.status == myPromise.REJECTED) {
            //放到setTimeout中，改为异步操作
            setTimeout(() => {
                try {
                    onRejected(this.value);
                } catch (error) {
                    onRejected(error);
                }
            });
        }
    }
}

 

5.promise的pendding状态处理

class myPromise {
    static PENDDING = "pendding";
    static FULFILLED = "fulfilled";
    static REJECTED = "rejected";

    constructor(executor) {
        this.status = myPromise.PENDDING;
        this.value = null;
        this.callbacks=[];//定义数组当用户调用定时器时，会将状态存入数组，定时结束后运行
        try {
            executor(this.resolve.bind(this), this.rejectud.bind(this));
        } catch (err) {
            this.rejectud(err);
        }
    }
    resolve(value) {
        if (this.status == myPromise.PENDDING) {
            this.status = myPromise.FULFILLED;
            this.value = value;
            this.callbacks.map(callback=>{
                callback.onFulfilled(value);
            })
        }
    }
    rejectud(reason) {
        if (this.status == myPromise.PENDDING) {
            this.status = myPromise.REJECTED;
            this.value = reason;
            this.callbacks.map(callback=>{
                callback.onRejected(reason);
            })
        }
    }
    //可以完成第一次then但是不能链式调用
    then(onFulfilled, onRejected) {
        if (typeof onFulfilled !== "function") {
            onFulfilled = () => { }
        }
        if (typeof onRejected !== "function") {
            onRejected = () => { }
        }
        if(this.status == myPromise.PENDDING){
            this.callbacks.push({
                onFulfilled, 
                onRejected
            })
        }
        if (this.status == myPromise.FULFILLED) {
            //放到setTimeout中，改为异步操作
            setTimeout(() => {
                try {
                    onFulfilled(this.value);
                } catch (error) {
                    onRejected(error);
                }
            });
        }
        if (this.status == myPromise.REJECTED) {
            //放到setTimeout中，改为异步操作
            setTimeout(() => {
                try {
                    onRejected(this.value);
                } catch (error) {
                    onRejected(error);
                }
            });
        }
    }
}

 

6.pendding的状态异常处理

 

class myPromise {
    static PENDDING = "pendding";
    static FULFILLED = "fulfilled";
    static REJECTED = "rejected";

    constructor(executor) {
        this.status = myPromise.PENDDING;
        this.value = null;
        this.callbacks=[];//定义数组当用户调用定时器时，会将状态存入数组，定时结束后运行
        try {
            executor(this.resolve.bind(this), this.rejectud.bind(this));
        } catch (err) {
            this.rejectud(err);
        }
    }
    resolve(value) {
        if (this.status == myPromise.PENDDING) {
            this.status = myPromise.FULFILLED;
            this.value = value;
            this.callbacks.map(callback=>{
                callback.onFulfilled(value);
            })
        }
    }
    rejectud(reason) {
        if (this.status == myPromise.PENDDING) {
            this.status = myPromise.REJECTED;
            this.value = reason;
            this.callbacks.map(callback=>{
                callback.onRejected(reason);
            })
        }
    }
    //可以完成第一次then但是不能链式调用
    then(onFulfilled, onRejected) {
        if (typeof onFulfilled !== "function") {
            onFulfilled = () => { }
        }
        if (typeof onRejected !== "function") {
            onRejected = () => { }
        }
        if(this.status == myPromise.PENDDING){
            this.callbacks.push({
                onFulfilled: value=>{
                    try {
                        onFulfilled(value)
                        resolve(value)
                    } catch (error) {
                        onRejected(error)
                    }
                },
                onRejected: value=>{
                    try {
                        onRejected(value)
                        resolve(value)
                    } catch (error) {
                        onRejected(error)
                    }
                }
            })
        }
        if (this.status == myPromise.FULFILLED) {
            //放到setTimeout中，改为异步操作
            setTimeout(() => {
                try {
                    onFulfilled(this.value);
                } catch (error) {
                    onRejected(error);
                }
            });
        }
        if (this.status == myPromise.REJECTED) {
            //放到setTimeout中，改为异步操作
            setTimeout(() => {
                try {
                    onRejected(this.value);
                } catch (error) {
                    onRejected(error);
                }
            });
        }
    }
}

7.pendding的异步任务处理

class myPromise {
    static PENDDING = "pendding";
    static FULFILLED = "fulfilled";
    static REJECTED = "rejected";

    constructor(executor) {
        this.status = myPromise.PENDDING;
        this.value = null;
        this.callbacks=[];//定义数组当用户调用定时器时，会将状态存入数组，定时结束后运行
        try {
            executor(this.resolve.bind(this), this.rejectud.bind(this));
        } catch (err) {
            this.rejectud(err);
        }
    }
    resolve(value) {
        if (this.status == myPromise.PENDDING) {
            this.status = myPromise.FULFILLED;
            this.value = value;
             //因为这里调用方法是异步的
            setTimeout(() => {
                this.callbacks.map(callback=>{
                    callback.onFulfilled(value);
                })
            });
           
        }
    }
    rejectud(reason) {
        if (this.status == myPromise.PENDDING) {
            this.status = myPromise.REJECTED;
            this.value = reason;
            //异步
            setTimeout(() => {
                this.callbacks.map(callback=>{
                    callback.onRejected(reason);
                })
            });
        }
    }
    //可以完成第一次then但是不能链式调用
    then(onFulfilled, onRejected) {
        if (typeof onFulfilled !== "function") {
            onFulfilled = () => { }
        }
        if (typeof onRejected !== "function") {
            onRejected = () => { }
        }
        if(this.status == myPromise.PENDDING){
            this.callbacks.push({
                onFulfilled: value=>{
                    try {
                        onFulfilled(value)
                        resolve(value)
                    } catch (error) {
                        onRejected(error)
                    }
                },
                onRejected: value=>{
                    try {
                        onRejected(value)
                        resolve(value)
                    } catch (error) {
                        onRejected(error)
                    }
                }
            })
        }
        if (this.status == myPromise.FULFILLED) {
            //放到setTimeout中，改为异步操作
            setTimeout(() => {
                try {
                    onFulfilled(this.value);
                } catch (error) {
                    onRejected(error);
                }
            });
        }
        if (this.status == myPromise.REJECTED) {
            //放到setTimeout中，改为异步操作
            setTimeout(() => {
                try {
                    onRejected(this.value);
                } catch (error) {
                    onRejected(error);
                }
            });
        }
    }
}

8.then的链式操作原理分析及实现

 1.then最终返回的是promise

2.then最终返回的promise的状态默认为resolve态，不会受之前状态的影响