2021-10-05

自定义Promise函数

第一种定义方式

// 自定义Promise函数模块
//es5定义模块的方式---匿名函数自调用/自调用函数表达式[IIFE]
(function (window) {

    const PENDDING = "pendding"
    const RESOLVED = "resolved"
    const REJECTED = "rejected"

    //promise构造函数
    //excutor:执行器（同步）
    class Promise {
        constructor(excutor) {
            const self = this
            self.status = PENDDING //给promsie对象指定status属性，初始值为pendding
            self.data = undefined //给promise对象指定一个用于存储结果数据的属性
            self.callbacks = [] //每个元素的结构：{onResolved(){},omRejected(){}}

            //立即同步执行excutor
            try {
                excutor(resolve, reject)
            } catch (error) {//如果执行器抛出异常，promise对象变为rejected状态
                reject(error)
            }

            function resolve(value) {
                //如果当前状态不是pendding，直接结束
                if (self.status !== PENDDING) {
                    return
                }
                //将状态改为resolved
                self.status = RESOLVED
                //保存value数据
                self.data = value
                //如果有待执行的callback函数，立即异步执行回调函数
                if (self.callbacks.length > 0) {
                    setTimeout(() => {//放入队列中执行所有成功的回调
                        self.callbacks.forEach(callbacksObj => {
                            callbacksObj.onResolved(value)
                        })
                    })
                }
            }
            function reject(reason) {
                //如果当前状态不是pendding，直接结束
                if (self.status !== PENDDING) {
                    return
                }
                //将状态改为rejected
                self.status = REJECTED
                //保存value数据
                self.data = reason
                //如果有待执行的callback函数，立即异步执行回调函数
                if (self.callbacks.length > 0) {
                    setTimeout(() => {//放入队列中执行所有失败的回调
                        self.callbacks.forEach(callbacksObj => {
                            callbacksObj.onRejected(reason)
                        })
                    })
                }
            }
        }
        /*
    promise原型对象的then()
    指定成功或失败的回调函数
    返回一个新的promise对象
    返回promise的结果由onResolved/onRejected执行结果决定
        1.抛出异常，返回promise的结果为失败，reason为异常
        2.如果返回的是promise对象，当前promise的状态由返回的promise执行的结果决定
        3.如果返回非promise对象，返回的promise为成功，value就是返回值
    */
   //Promise.prototype.then
        then(onResolved, onRejected) {
            const self = this
            //指定回调函数的默认值（必须还是函数）
            onResolved = typeof onResolved === "function" ? onResolved : value => value
            onRejected = typeof onRejected === "function" ? onRejected : reason => { throw reason }
            //返回一个新的promise
            return new Promise((resolve, reject) => {
                function handle(callback) {//执行指定的回调函数，根据执行的结果改变return的promise的状态/数据
                    try {
                        const result = callback(self.data)
                        if (result instanceof Promise) {//2.如果返回的是promise对象，当前promise的状态由返回的promise执行的结果决定
                            //  result.then(
                            //      value=>resolve(value),
                            //      reason=>reject(reason)
                            //  )
                            result.then(resolve, reject)
                        } else {// 3.如果返回非promise对象，返回的promise为成功，value就是返回值
                            resolve(result)
                        }
                    } catch (error) {//1.抛出异常，返回promise的结果为失败，reason为异常
                        reject(error)
                    }
                }
                if (self.status === RESOLVED) {//当前promise的状态是resolved
                    //立即异步执行成功的回调函数
                    setTimeout(() => {
                        handle(onResolved)
                    })
                } else if (self.status === REJECTED) {//当前promise的状态是rejected
                    setTimeout(() => {
                        handle(onRejected)
                    })
                } else { //当前promise的状态是pendding
                    //将成功或失败的回调函数保存callback容器中缓存起来
                    self.callbacks.push({
                        onResolved(value) {
                            handle(onResolved)
                        },
                        onRejected(reason) {
                            handle(onRejected)
                        }
                    })
                }


            })
        }
        /*
        promise原型对象的catch()
        指定失败的回调函数
        返回一个新的promise对象
        */
    //Promise.prototype.catch
        catch(onRejected) {
            return this.then(undefined, onRejected)
        }

        /*
  promise函数对象的方法resolve()
  返回一个指定结果的成功的promise
  */
 //==>Promise当作函数对象
 //Promise.resolve
        static resolve = function (value) {
            //返回一个成功/失败的promise
            return new Promise((resolve, reject) => {
                if (value instanceof Promise) {//value为promise   使用value的结果作为promise的结果
                    // value.then(
                    //     value=>{resolve(value)},
                    //     reason=>{reject(reason)}
                    // )
                    value.then(resolve, reject)
                } else {//value为不是promise  =>promise变为成功，数据为value
                    resolve(value)
                }
            })
        }
        /*
        promise函数对象的方法reject()
        返回一个指定reason的失败的promise
        */
 //Promise.reject
        static reject = function (reason) {
            //返回一个失败的promise
            return new Promise((resolve, reject) => {
                reject(reason)
            })
        }
        /*
        promise函数对象的方法all()
        返回一个promise，只有所有promise都成功时才成功，否则失败
        */
  //Promise.all
        static all = function (promises) {
            //用来保存所有成功的var；value的数组
            const values = new Array(promises.length)
            //用来保存成功promise的数据【计数】
            let resolveedCount = 0
            //返回一个新的promise
            return new Promise((resolve, reject) => {
                //遍历获取每个promise的结果
                promises.forEach((p, index) => {
                    Promise.resolve(p).then(//若p不是promise对象，便可利用Promise.resolve(p)将其变为promise
                        value => {
                            resolveedCount++//成功的数量加一
                            //p成功了，将成功的value保存到values中
                            values[index] = value
                            //如果全部成功了，将return的promise改变成功
                            if (resolveedCount === promises.length) {
                                resolve(values)
                            }
                        },
                        reason => {//只要一个失败了，return的promise就失败
                            reject(reason)
                        }
                    )
                })
            })
        }
        /*
        promise函数对象的方法race()
        返回一个promise，其结果有第一个完成的promise决定
        */
  //Promise.race
        static race = function (promises) {
            return new Promise((resolve, reject) => {
                promises.forEach((p, index) => {
                    Promise.resolve(p).then(//若p不是promise对象，便可利用Promise.resolve(p)将其变为promise
                        value => {//一旦有成功了，将return变为成功
                            resolve(value)
                        },
                        reason => {//一旦失败了，将return变为失败
                            reject(reason)
                        }
                    )
                })
            })
        }

    }
    //向外暴露Promise函数
    window.Promise = Promise
})(window)

第二种定义方式

// 自定义Promise函数模块
//es5定义模块的方式---匿名函数自调用/自调用函数表达式[IIFE]
(function (window) {

    const PENDDING = "pendding"
    const RESOLVED = "resolved"
    const REJECTED = "rejected"

    //promise构造函数
    //excutor:执行器（同步）
    function Promise(excutor) {
        const self = this
        self.status = PENDDING //给promsie对象指定status属性，初始值为pendding
        self.data = undefined //给promise对象指定一个用于存储结果数据的属性
        self.callbacks = [] //每个元素的结构：{onResolved(){},omRejected(){}}

        //立即同步执行excutor
        try {
            excutor(resolve, reject)
        } catch (error) {//如果执行器抛出异常，promise对象变为rejected状态
            reject(error)
        }

        function resolve(value) {
            //如果当前状态不是pendding，直接结束
            if (self.status !== PENDDING) {
                return
            }
            //将状态改为resolved
            self.status = RESOLVED
            //保存value数据
            self.data = value
            //如果有待执行的callback函数，立即异步执行回调函数
            if (self.callbacks.length > 0) {
                setTimeout(() => {//放入队列中执行所有成功的回调
                    self.callbacks.forEach(callbacksObj => {
                        callbacksObj.onResolved(value)
                    })
                })
            }
        }
        function reject(reason) {
            //如果当前状态不是pendding，直接结束
            if (self.status !== PENDDING) {
                return
            }
            //将状态改为rejected
            self.status = REJECTED
            //保存value数据
            self.data = reason
            //如果有待执行的callback函数，立即异步执行回调函数
            if (self.callbacks.length > 0) {
                setTimeout(() => {//放入队列中执行所有失败的回调
                    self.callbacks.forEach(callbacksObj => {
                        callbacksObj.onRejected(reason)
                    })
                })
            }
        }
    }


    /*
    promise原型对象的then()
    指定成功或失败的回调函数
    返回一个新的promise对象
    返回promise的结果由onResolved/onRejected执行结果决定
        1.抛出异常，返回promise的结果为失败，reason为异常
        2.如果返回的是promise对象，当前promise的状态由返回的promise执行的结果决定
        3.如果返回非promise对象，返回的promise为成功，value就是返回值
    */
    Promise.prototype.then = function (onResolved, onRejected) {
        const self = this
        //指定回调函数的默认值（必须还是函数）
        onResolved = typeof onResolved === "function" ? onResolved : value => value
        onRejected = typeof onRejected === "function" ? onRejected : reason => { throw reason }
        //返回一个新的promise
        return new Promise((resolve, reject) => {
            function handle(callback) {//执行指定的回调函数，根据执行的结果改变return的promise的状态/数据
                try {
                    const result = callback(self.data)
                    if (result instanceof Promise) {//2.如果返回的是promise对象，当前promise的状态由返回的promise执行的结果决定
                        //  result.then(
                        //      value=>resolve(value),
                        //      reason=>reject(reason)
                        //  )
                        result.then(resolve, reject)
                    } else {// 3.如果返回非promise对象，返回的promise为成功，value就是返回值
                        resolve(result)
                    }
                } catch (error) {//1.抛出异常，返回promise的结果为失败，reason为异常
                    reject(error)
                }
            }
            if (self.status === RESOLVED) {//当前promise的状态是resolved
                //立即异步执行成功的回调函数
                setTimeout(() => {
                    handle(onResolved)
                })
            } else if (self.status === REJECTED) {//当前promise的状态是rejected
                setTimeout(() => {
                    handle(onRejected)
                })
            } else { //当前promise的状态是pendding
                //将成功或失败的回调函数保存callback容器中缓存起来
                self.callbacks.push({
                    onResolved(value) {
                        handle(onResolved)
                    },
                    onRejected(reason) {
                        handle(onRejected)
                    }
                })
            }


        })
    }
    /*
    promise原型对象的catch()
    指定失败的回调函数
    返回一个新的promise对象
    */
    Promise.prototype.catch = function (onRejected) {
        return this.then(undefined, onRejected)
    }
    /*
    promise函数对象的方法resolve()
    返回一个指定结果的成功的promise
    */
    Promise.resolve = function (value) {
        //返回一个成功/失败的promise
        return new Promise((resolve, reject) => {
            if (value instanceof Promise) {//value为promise   使用value的结果作为promise的结果
                // value.then(
                //     value=>{resolve(value)},
                //     reason=>{reject(reason)}
                // )
                value.then(resolve, reject)
            } else {//value为不是promise  =>promise变为成功，数据为value
                resolve(value)
            }
        })
    }
    /*
    promise函数对象的方法reject()
    返回一个指定reason的失败的promise
    */
    Promise.reject = function (reason) {
        //返回一个失败的promise
        return new Promise((resolve, reject) => {
            reject(reason)
        })
    }
    /*
    promise函数对象的方法all()
    返回一个promise，只有所有promise都成功时才成功，否则失败
    */
    Promise.all = function (promises) {
        //用来保存所有成功的var；value的数组
        const values =new Array(promises.length)
        //用来保存成功promise的数据【计数】
        let resolveedCount = 0
        //返回一个新的promise
        return new Promise((resolve, reject) => {
            //遍历获取每个promise的结果
            promises.forEach((p, index) => {
                Promise.resolve(p).then(//若p不是promise对象，便可利用Promise.resolve(p)将其变为promise
                    value => { 
                        resolveedCount++//成功的数量加一
                        //p成功了，将成功的value保存到values中
                        values[index]=value
                        //如果全部成功了，将return的promise改变成功
                        if(resolveedCount===promises.length){
                            resolve(values)
                        }
                    },
                    reason => {//只要一个失败了，return的promise就失败
                        reject(reason)
                    }
                )
            })
        })
    }
    /*
    promise函数对象的方法race()
    返回一个promise，其结果有第一个完成的promise决定
    */
    Promise.race = function (promises) {
        return new Promise((resolve,reject)=>{
            promises.forEach((p,index)=>{
                Promise.resolve(p).then(//若p不是promise对象，便可利用Promise.resolve(p)将其变为promise
                    value=>{//一旦有成功了，将return变为成功
                      resolve(value)
                    },
                    reason=>{//一旦失败了，将return变为失败
                       reject(reason)
                    }
                )
            })
        })
     } 
    //向外暴露Promise函数
    window.Promise = Promise
})(window)