Promise的学习笔记4——自定义Promise

1. 整体结构

/**
 * 自定义promise函数模块：IIFE
 */
(function (window) {
    /**
     * Promise构造函数——excutor：执行器函数(同步)
     */
    function Promise(excutor) {

    }

    /**
     * Promise原型对象的then()方法
     */
    Promise.prototype.then = function (onResolved, onReject) {

    }

    /**
     * Promise原型对象的catch()方法
     */
    Promise.prototype.catch = function (onReject) {

    }

    /**
     * Promise函数对象的resolve方法
     */
    Promise.resolve = function (value) {

    }

    /**
     * Promise函数对象的reject方法
     */
    Promise.reject = function (reason) {

    }

    /**
     * Promise函数对象的all方法
     */
    Promise.all = function (promises) {

    }

    /**
     * Promise函数对象的race方法
     */
    Promise.race = function (promises) {

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

2. promise原型对象的then()/catch()方法

    /**
     * Promise原型对象的then()方法
     * 指定成功和失败的回调函数
     * 返回一个新的promise对象
     */
    Promise.prototype.then = function (onResolved, onRejected) {
        const _this = this
        //指定回调函数的默认值必须是函数
        onResolved = typeof onResolved === 'function' ? onResolved : value => value
        onRejected = typeof onRejected === 'function' ? onRejected : reason => {throw reason}
        //返回一个新的promise
        return new Promise((resolve, reject) => {
            /**
             * 执行指定的回调函数
             * 根据执行的结果改变return的promise的状态/数据
             */
            function handle(callback) {
                try {
                    const result = callback(_this.data)
                    //返回的是promise，返回的promise的结果就是result
                    if (result instanceof Promise) {
                        result.then(resolve, reject)

                    } else { //返回的不是promise，返回promise为成功，value就是result
                        resolve(result)
                    }
                } catch (error) {
                    reject(error)
                }
            }
            //promise的状态是resolved
            if (_this.status === RESOLVED) {
                //立即异步执行成功的回调函数
                setTimeout(() => {
                    handle(onResolved)
                });
            } else if (_this.status === REJECTED) { //promise的状态是rejected
                setTimeout(() => {
                    handle(onRejected)
                });
            } else { //promise的状态是pending
                //将成功和失败的回调函数保存callbacks中
                _this.callbacks.push({
                    onResolved(value) {
                        handle(onResolved)
                    },
                    onRejected(reason) {
                        handle(onRejected)
                    }
                })
            }
        })
    }
    
    /**
     * Promise原型对象的catch()方法
     */
    Promise.prototype.catch = function(onRejected) {
        return this.then(undefined, onRejected)
    }

3. promise函数对象的resolve()/reject()方法

/**
     * Promise函数对象的resolve方法
     */
    Promise.resolve = function(value) {
        //返回一个成功/失败的promise
        return new Promise((resolve, reject) => {
            //value是promise时，使用value的结果作为promise的结果
            if (value instanceof Promise) {
                value.then(resolve, reject)
            } else { //value不是promise时，promise变为成功，数据时value
                resolve(value)
            }
        })
    }

    /**
     * Promise函数对象的reject方法
     */
    Promise.reject = function(reason) {
        //返回一个失败的promise
        return new Promise((resolve, reject) => {
            reject(reason)
        })
    }

4. promise函数对象的all()/race()方法

    /**
     * Promise函数对象的all方法
     * 返回一个promise，只有当所有promise都成功时才成功，否则只要有一个失败就失败
     */
    Promise.all = function (promises) {
        //保存所有成功value的数组
        const values = new Array(Promise.length)
        //保存成功promise的数量
        let resolvedCount = 0
        //返回一个新的promise
        return new Promise((resolve, reject) => {
            //遍历promise，获得每个promise的结果
            promises.forEach((p, index) => {
                p.then(
                    value => {
                        resolvedCount++ //成功的数量加1
                        values[index] = value //将成功的value保存values
                        if (resolvedCount === promises.length) {
                            resolve(values)
                        }
                    },
                    //只要有一个失败，返回的promise就是失败
                    reason => {
                        reject(reason)
                    }
                )
            })
        })
    }

    /**
     * Promise函数对象的race方法
     * 返回一个promise，其结果由第一个完成的promise决定
     */
    Promise.race = function (promises) {
        return new Promise((resolve, reject) => {
            promises.forEach((p, index) => {
                p.then(
                    value => {
                        resolve(value)
                    },
                    reason => {
                        reject(reason)
                    }
                )
            })
        })
    }