封装promise成class类(写完就忘系列)

根据上篇,再通过class语法糖的形式封装promise。


class Promise {
    //构造方法
    constructor(excutor) {
        //4.为实例对象添加属性
        this.PromiseState = 'pending'
        this.PromiseResult = null;
        //8.2 为了执行器函数中的同步改为异步,需要将then中的两个回调存储在一个对象里
        //9 将callback改为数组类型,以解决多个回调的情况
        this.callback = [];
        //5.保存实例对象this的值
        let self = this;
        // 3、excutor有两个函数参数,分别是resolve(),reject()
        function resolve(data) {
            //6. promise的状态只能更改一次,所以对当前状态先做判断
            if (self.PromiseState !== 'pending') return;
            //5.1修改对象的状态和值
            self.PromiseState = 'resolved';
            self.PromiseResult = data;
            // 8.3 调用成功的回调函数
            // if (self.callback.onResolved) {
            //     // self.callback.onResolved(data)
            // }
            //9 以解决多个回调的情况
            setTimeout(() => {
                self.callback.forEach(item => {
                    item.onResolved(data)
                })
            })
        }

        function reject(data) {
            // 6.promise的状态只能更改一次,所以对当前状态先做判断
            if (self.PromiseState !== 'pending') return;
            //5.1修改对象的状态和值
            self.PromiseState = 'rejected';
            self.PromiseResult = data;
            // 8.3 调用失败的回调函数
            // if (self.callback.onRejected) {
            //     // self.callback.onRejected(data)       
            // }
            //9 以解决多个回调的情况
            setTimeout(() => {
                self.callback.forEach(item => {
                    item.onRejected(data)
                })
            })

        }
        // 5,处理throw抛的出异常
        try {
            // 2、同步调用形参执行器函数
            excutor(resolve, reject);
        } catch (e) {
            reject(e)
        }
    }
    // then 方法
    then(onResolved, onRejected) {
        //7.如何对then进行回调
        //7.因为resolve状态对应then方法中第一个回调函数;
        //reject状态对应then方法中第二个回调函数;
        //所以,在调用onResolved和onRejected之前,要先对当前实例对象p的状态做判断
        const self = this;
        //12 catch方法异常穿透
        if (typeof onRejected !== 'function') {
            onRejected = reason => {
                throw reason;
            }
        }
        //13 catch方法值传递
        if (typeof onResolved !== 'function') {
            onResolved = value => value
        }
        return new Promise((resolve, reject) => {
            //封装函数,减少重复代码
            function callbacks(type) {
                try {
                    let result = type(self.PromiseResult);
                    //判断
                    if (result instanceof Promise) {
                        result.then(v => {
                            resolve(v)
                        }, r => {
                            reject(r)
                        })
                    } else {
                        resolve(result);
                    }
                } catch (e) {
                    reject(e);
                }
            };
            if (this.PromiseState === 'resolved') {
                setTimeout(() => {
                    callbacks(onResolved);
                })
            }
            if (this.PromiseState === 'rejected') {
                // 获取回调函数的执行结果
                setTimeout(() => {
                    callbacks(onRejected);
                })
            }
            //8.1 为了执行器函数中的同步改为异步,
            //判断pending状态,保存回调函数
            //在得到状态改变的通知后,then方法需要判断究竟调用成功或失败的回调函数
            // 将两个函数存放在一个对象中,一一对应构造函数里的相对应的函数
            if (this.PromiseState === 'pending') {
                //9 以解决多个回调的情况
                this.callback.push({
                    //11异步任务then返回的结果
                    onResolved: function() {
                        callbacks(onResolved);
                    },
                    //11异步任务then返回的结果
                    onRejected: function() {
                        callbacks(onRejected);
                    }
                })
            }
        })
    }
    // catch 方法
    catch (onRejected) {
        return this.then(undefined, onRejected);
    }
    // static静态成员,不属于实例对象,属于类(构造函数)
    // resolve方法
    static resolve(value) {
        return new Promise((resolve, reject) => {
            if (value instanceof Promise) {
                value.then(v => {
                    resolve(v)
                }, r => {
                    reject(r)
                })
            } else {
                resolve(value)
            }
        })
    }
    // resject方法
    static reject(reason) {
        return new Promise((resolve, reject) => {
            reject(reason)
        })
    }
    // all方法
    static all(promises) {
        return new Promise((resolve, reject) => {
            let count = 0;
            let arr = [];
            for (let i = 0; i < promises.length; i++) {
                promises[i].then(v => {
                    //想要对象的状态为成功
                    //则每个promise对象都应成功
                    count++;
                    //将当前promise对象成功的结果存入到数组中
                    arr[i] = v;
                    //判断
                    if (count === promises.length) {
                        //修改状态
                        resolve(arr)
                    }
                }, r => {
                    reject(r);
                })
            }
        })
    }
    // race方法
    static race(promises) {
        return new Promise((resolve, reject) => {
            for (let i = 0; i < promises.length; i++) {
                //数组中的promise,谁先改变状态,那么谁先调then方法,
                //最终返回的promise对象的结果也是第一个改变状态的promise的结果
                promises[i].then(v => {
                    resolve(v)
                }, r => {
                    reject(r)
                })
            }
        })
    };
}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值