Promise笔记3

自定义Promise

1.定义整体结构

(function (window) {
    /*
     Promise构造函数
     excutor：内部同步执行的函数（resolve,reject）=>{}
     */
    function Promise(excutor) {

    }
    //then()方法指定成功/失败的回调函数，返回新的promise对象
    Promise.prototype.then = function (onResolved, onReject) {

    }
    //catch()方法指定失败回调函数
    Promise.prototype.catch = function (onReject) {

    }
    //指定成功的value
    Promise.resolve = function (value) {

    }
    // 指定失败的reason
    Promise.reject = function (reason) {

    }
    //all方法，promises中的promise都成功即成功，有一个错即错
    Promise.all = function (promises) {

    }
    //race方法
    Promise.race = function (promises) {

    }
    //暴露构造函数
    window.Promise = Promise
})(window)

2.then()/catch()的实现

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) => {
        /*
        callback 成功/失败的回调函数
         */
        function handle(callback) {
            try {
                const x = callback(_this.data)
                //返回的是promise，返回的promise的结果就是x
                if (x instanceof Promise) {
                    x.then(resolve, reject)
                } else { //返回的不是promise，返回promise为成功，value就是x
                    resolve(x)
                }
            } catch (error) {
                reject(error)
            }
        }
        if (_this.status === 'resolved') {
            //立即异步执行成功的回调函数
            setTimeout(() => {
                handle(onResolved)
            });
        } else if (_this.status === 'rejected') { //promise的状态是rejected
            setTimeout(() => {
                handle(onRejected)
            });
        } else { //状态是pending
            //将成功和失败的回调函数保存callbacks中
            _this.callbacks.push({
                onResolved(value) {
                    handle(onResolved)
                },
                onRejected(reason) {
                    handle(onRejected)
                }
            })
        }
    })
}
// catch()方法
Promise.prototype.catch = function (onRejected) {
    return this.then(undefined, onRejected)
}

3.all/race()的实现

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 = function (promises) {
    return new Promise((resolve, reject) => {
        for (var i = 0; i < promises.length; i++) {
            Promise.resolve(promises[i]).then(
                (value) => {
                    resolve(value)
                },
                (reason) => {
                    reject(reason)
                }
            )
        }
    })
}