手写Promise

ES5  function版本

//声明函数
function Promise(executer) {
    this.PromiseState = 'pending'
    this.PromiseResult = null
    this.callbacks = []

    const self = this
    function resolve(data) {
        if (self.PromiseState !== 'pending') return
        self.PromiseState = 'fulfilled'
        self.PromiseResult = data
        //执行成功的回调
        setTimeout(() => {
            self.callbacks.forEach(item => {
                item.onResolved(data)
            })
        })
    }
    function reject(data) {
        if (self.PromiseState !== 'pending') return
        self.PromiseState = 'rejected'
        self.PromiseResult = data
        //执行失败的回调
        setTimeout(()=>{
            self.callbacks.forEach(item => {
                item.onRejected(data)
            })
        })
    }
    try {
        executer(resolve, reject)
    } catch (e) {
        reject(e)
    }
}
//添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
    const self = this
    //判断回调函数参数----异常穿透【如果没有传第二个值，我们创建一个】
    if (typeof onRejected !== 'function') {
        onRejected = reason => {
            throw reason
        }
    }
    if (typeof onResolved !== 'function') {
        onResolved = value => value
    }
    return new Promise((resolve, reject) => {
        //回调函数
        function callback(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 === 'fulfilled') {
            setTimeout(()=>{
                callback(onResolved)
            })
        }
        if (this.PromiseState === 'rejected') {
            setTimeout(()=>{
                callback(onRejected)
            })
        }
        if (this.PromiseState === 'pending') {
            this.callbacks.push({
                onResolved: function () {
                    callback(onResolved)
                },
                onRejected: function () {
                    callback(onRejected)
                }
            })
        }
    })
}
//添加catch方法
Promise.prototype.catch = function (onRejected) {
    return this.then(undefined, onRejected)
}
//添加resolve方法
Promise.resolve = function (value) {
    return new Promise((resolve, reject) => {
        if (value instanceof Promise) {
            value.then(v => {
                resolve(v)
            }, r => {
                reject(r)
            })
        } else {
            resolve(value)
        }
    })
}
//添加reject方法
Promise.reject = function (reason) {
    return new Promise((resolve, reject) => {
        reject(reason)
    })
}
//添加all方法
Promise.all = function (promises) {
    let count = 0
    let arr = []
    return new Promise((resolve, reject) => {
        for (let i = 0; i < promises.length; i++) {
            promises[i].then(v => {
                count++
                arr[i] = v
                if (count === promises.length) {
                    resolve(arr)
                }
            }, r => {
                reject(r)
            })
        }
    })
}
//添加race方法
Promise.race = function (promises) {
    return new Promise((resolve, reject) => {
        for (let i = 0; i < promises.length; i++) {
            promises[i].then(v => {
                resolve(v)
            }, r => {
                reject(r)
            })

        }
    })
}

Es6 class版本

class Promise {
    //构造方法
    constructor(executer) {
        //给对象添加属性
        this.PromiseState = 'pending'
        this.PromiseResult = null
        //声明回调函数
        this.callbacks = []

        //保存this
        const self = this

        function resolve(data) {
            //判断状态---状态只能修改一次
            if (self.PromiseState !== 'pending') return
            //修改状态与对象的值
            self.PromiseState = 'fulfilled'
            self.PromiseResult = data
            //执行成功的回调
            setTimeout(() => {
                self.callbacks.forEach(item => {
                    item.onResolved(data)
                })
            })
        }
        function reject(data) {
            if (self.PromiseState !== 'pending') return
            //修改状态与对象的值
            self.PromiseState = 'rejected'
            self.PromiseResult = data
            //执行失败的回调-
            setTimeout(() => {
                self.callbacks.forEach(item => {
                    item.onRejected(data)
                })
            })
        }

        try {
            //调用执行器函数----同步调用
            executer(resolve, reject)
        } catch (e) {
            //抛出异常--修改状态
            reject(e)
        }
    }

    //then方法封装
    then(onResolved, onRejected) {
        const self = this
        //判断回调函数参数----异常穿透【如果没有传第二个值，我们创建一个】
        if (typeof onRejected !== 'function') {
            onRejected = reason => {
                throw reason
            }
        }
        if (typeof onResolved !== 'function') {
            onResolved = value => value
        }
        return new Promise((resolve, reject) => {
            //封装函数
            function callback(type) {
                try {
                    //获取回调函数的执行结果
                    let result = type(self.PromiseResult)
                    //对结果进行判断
                    if (result instanceof Promise) {
                        //如果返回的结果是Promise-----则一定可以调then方法
                        result.then(v => {
                            resolve(v)
                        }, r => {
                            reject(r)
                        })
                    } else {
                        //如果返回结果不是Promise
                        resolve(result)
                    }
                } catch (e) {
                    reject(e)
                }
            }
            //调用回调函数
            if (this.PromiseState === 'fulfilled') {
                setTimeout(() => {
                    callback(onResolved)
                })
            }
            if (this.PromiseState === 'rejected') {
                setTimeout(() => {
                    callback(onRejected)
                })
            }
            //判断pending状态------异步任务回调执行
            if (this.PromiseState === 'pending') {
                //保存回调函数
                this.callbacks.push({
                    onResolved: function () {
                        //成功的回调
                        callback(onResolved)
                    },
                    onRejected: function () {
                        //失败的回调
                        callback(onRejected)
                    }
                })
            }
        })
    }
    //cath方法封装
    cath(onRejected) {
        return this.then(undefined, onRejected)
    }
    //resolve方法封装[静态成员，属于类，不属于实例对象]
    static resolve(value) {
        return new Promise((resolve, reject) => {
            if (value instanceof Promise) {
                value.then(v => {
                    resolve(v)
                }, r => {
                    reject(r)
                })
            } else {
                resolve(value)
            }
        })
    }
    //reject方法
    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 => {
                    count++
                    //将当前的Promise对象的结果保存在arr中，不用push，是因为顺序会因为异步而错乱
                    arr[i] = v
                    //当count等于数组的长度时，即三个都是成功状态
                    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++) {
                promises[i].then(v => {
                    resolve(v)
                }, r => {
                    reject(r)
                })

            }
        })
    }
}