promise源码深度解析

//promise的封装

        class myPromise {

            constructor(fn) {

                if (typeof fn !== 'function') { //判断传输的类型不是函数 报相应的错误

                    throw TypeError(`myPromise resolver ${fn} is not a function`)

                }

                this.status = 'pending'; //设置默认状态

                this.data = undefined; //设置默认值

                this.resolveCBArr = []; // 设置存储成功的回调函数

                this.rejectCBArr = []; // 设置存储失败的回调函数

                // 函数内部的resolve函数

                let resolve = (data) => { //成功的回调

                    if (this.status == 'pending') {

                        this.status = 'resolved'

                        this.data = data;

                        this.resolveCBArr.forEach(fn => fn()); //遍历resolveArr数组每一位 而后依次执行

                    }

                }

                // 函数内部的reject函数

                let reject = (data) => { //失败的回调

                    if (this.status == 'pending') {

                        this.status = 'rejected'

                        this.data = data;

                        this.rejectCBArr.forEach(fn => fn()); //遍历rejectArr数组每一位 而后依次执行

                    }

                }

                fn(resolve, reject) //挂载到new myPromise((resolve,reject) => {})

            }

            //原型then方法的封装

            then(resolveFn, rejectFn) {

                if (this.status == 'resolved') { //成功的回调的结果

                    //为了模仿promise对象中 then方法内的方法是异步的 利用setTimeout

                    setTimeout(() => {

                        let res = resolveFn(this.data) // 接受返回值的结果是promise 仍是 值

                        if (res instanceof myPromise) { // 判断返回的值是否为promise构造出来的

                            return res; //若是是 直接返回

                        } else {

                            return myPromise.resolve(res) // 若是不是 返回resolve状态的值

                        }

                    }, 0)

                }

                if (this.status == 'rejected') { //失败的回调的结果

                    //为了模仿promise对象中 then方法内的方法是异步的 利用setTimeout

                    setTimeout(() => {

                        let res = rejectFn(this.data) // 接受返回值的结果是promise 仍是 值

                        if (res instanceof myPromise) { // 判断返回的值是否为promise构造出来的

                            return res; //若是是 直接返回

                        } else {

                            return myPromise.resolve(res) // 若是不是 返回resolve状态的值

                        }

                    }, 0)

                }

                if (this.status == 'pending') { //执行异步的回调函数 如 setTimeout

                    return new myPromise((resolve, reject) => { //首先确定返回promise对象

                        //利用当即执行函数的特性 将每个异步成功的回调插入数组中

                        this.resolveCBArr.push(((resolveFn) => {

                            //return出去一个函数,为了将里面的结果映射给 this.resolveCB

                            return () => {

                                let res = resolveFn(this.data);// 接受返回值的结果是promise 仍是值

                                if (res instanceof myPromise) { // 判断返回的值是否为promise构造出来的

                                    res.then(resolve, reject) //若是是promise 调用then方法 执行resolve 将状态映射给new myPromise 返回相应的回调

                                } else {

                                    resolve(res) //若是不是 返回resolve状态的值

                                }

                            }

                        })(resolveFn))

                        //利用当即执行函数的特性 将每个异步失败的回调插入数组中

                        this.rejectCBArr.push(((rejectFn) => {

                            //return出去一个函数,为了将里面的结果映射给 this.rejectCB

                            return () => {

                                let res = rejectFn(this.data);// 接受返回值的结果是promise 仍是值

                                if (res instanceof myPromise) { // 判断返回的值是否为promise构造出来的

                                    res.then(resolve, reject) //若是是promise 调用then方法 执行reject 将状态映射给new myPromise 返回相应的回调

                                } else {

                                    resolve(res) //若是不是 返回resolve状态的值

                                }

                            }

                        })(rejectFn))

                    })

                }

            }

            static resolve(data) { //上面的静态方法 myPromise.resolve()

                return new myPromise(reslove => reslove(data)) //执行封装好的resolve

            }

            static reject(data) { //上面的静态方法 myPromise.reject()

                return new myPromise((resolve, reject) => reject(data)) //执行封装好的reject

            }

            static all(dataArr){ //上面的静态方法 myPromise.all()

　　　　　　return new myPromise(resolve => {

　　　　　　　　　　resolve(dataArr) //将传来的数组添加到data中

　　　　　　})

　　　　}

    }

--------------------------------------------------------------------------------------------------------------------- 

 总结:

promise的封装分为 promise内部的一些方法 如 reslove reject 经过判断状态来

决定执行哪一个函数 以及传输值能够将值也输出 第二部分是原型上面的then方法 then方法

也一样里面是两个回调函数 分别是成功和失败执行的函数 也是经过 内部方法的状态来决定

里面须要判断的一点是 return出去的值是 promise对象仍是 其余类型的值 若是是promise

对象下一次调用then方法,是由上一次的return出去的状态来决定是成功仍是失败,若是不是

 promise对象的话 能够直接返回相应的值 第三部分为promise上面静态的方法 如Promise.resolve()

这些方法也能够直接调用 直接返回一个带有状态的promise对象就能够了,最后一点也是最难

理解的一点 就是异步的操做 当promise函数的内部调用 setTimeout 状态为pending 咱们

须要特殊的处理一下 保证then方法内能够依旧执行 咱们须要用一个数组来接收变化的值,而后

配合咱们的当即执行函数来return一个新的函数 将改变以后的状态映射给 Promise对象 ,最后的

最后 为了模拟then方法的异步 咱们能够将resolve reject函数内部添加setTimeout 从而使then

方法内部的函数有一种异步的感受