自定义promise

promise的详细介绍-来源博客（YK菌）

1、自定义Promise 函数版本 IIFE

(function (window) {
    const PENDING = "pending"
    const RESOLVED = "resolved"
    const REJECTED = "rejected"
    /**promise 构造函数   excutor执行器函数*/
    function Promise(excutor) {
        //给promise对象指定status属性，初始值为pending
        this.status = PENDING
        //给promise对象指定一个用于存储结果数据的属性
        this.data = undefined;
        //每个元素的结构 {onResolved(){},onrejected(){}}
        this.callbacks = []
        let self = this;
        function resolve(value) {
            //状态更改过以后不再执行
            if (self.status !== PENDING) {
                return
            }
            //更改状态
            self.status = RESOLVED
            //保存value数据
            self.data = value
            //如果有待执行cakkback函数，立即异步执行回调函数
            if (self.callbacks.length > 0) {
                setTimeout(() => {//放入队列中执行所有成功的回调
                    self.callbacks.forEach(callbacksObj => {
                        callbacksObj.onResolved(value)
                    });
                })

            }
        }
        function reject(reason) {
            //状态更改过以后不再执行
            if (self.status !== PENDING) {
                return
            }
            //更改状态
            self.status = REJECTED
            //保存value数据
            self.data = reason
            //如果有待执行cakkback函数，立即异步执行回调函数
            if (self.callbacks.length > 0) {
                setTimeout(() => {//放入队列中执行所有失败的回调
                    self.callbacks.forEach(callbacksObj => {
                        callbacksObj.onRejected(reason)
                    });
                })

            }
        }
        try {
            //立即同步执行excutor
            excutor(resolve, reject)
        } catch (error) {//如果执行器抛出异常
            reject(error)
        }

    }

    /**原型上的then*/
    Promise.prototype.then = function (onResolved, onRejected) {
        let self = 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(fn) {
                /**
                     1、如果执行抛出异常 return的promise就会失败，reason就是error
                     2、如果回调函数不是promise,return的promise就会成功，value就是返回值
                     3、如果回调函数返回的是promise，return的promise结果就是这个promise 的结果
                    */
                try {
                    let result = fn(self.data)
                    //    3、如果回调函数返回的是promise，return的promise结果就是这个promise 的结果
                    if (result instanceof Promise) {
                        result.then(resolve, reject)
                        //等价于
                        // result.then(
                        //     value => {resolve(value)},
                        //     reason => {reject(reason)}
                        // )
                    } else {
                        // 2、如果回调函数不是promise,return的promise就会成功，value就是返回值
                        resolve(result)
                    }
                } catch (err) {
                    reject(err)
                }
            }
            //如果状态还没有被更改此时缓存回调函数
            if (self.status === RESOLVED) {
                //如果是状态已经更改过了，回调函数放入队列中，并改变promise的状态
                setTimeout(() => {
                    handle(onResolved)
                })
            } else if (self.status === REJECTED) {//rejected
                //如果是状态已经更改过了，回调函数放入队列中
                setTimeout(() => {
                    handle(onRejected)
                })
            } else {
                //当前还是pending状态，保存回调函数,
                self.callbacks.push({
                    onResolved() {
                        handle(onResolved)
                    },
                    onRejected() {
                        handle(onRejected)
                    }
                })
            }
        })
    }
    /**原型上的catch*/
    Promise.prototype.catch = function (onRejected) {
        return this.then(undefined, onRejected)

    }
    /**函数对象的方法 resolve*/
    Promise.resolve = function (value) {
        //返回一个成功或者失败的promise
        return new Promise((resolve, reject) => {
            try {
                //    3、如果回调函数返回的是promise，return的promise结果就是这个promise 的结果
                if (value instanceof Promise) {
                    value.then(resolve, reject)
                } else {
                    // 2、如果回调函数不是promise,return的promise就会成功，value就是返回值
                    resolve(value)
                }
            } catch (err) {
                reject(err)
            }
        })
    }
    /**函数对象的方法 reject*/
    Promise.reject = function (reason) {
        return new Promise((resolve, reject) => {
            reject(reason)
        })
    }
    /**函数对象的方法 all*/
    Promise.all = function (promises) {
        let list = new Array(promises.length)
        let resolvedCount = 0
        return new Promise((resolve, reject) => {
            //遍历获取所有promise的结果
            promises.forEach((p, index) => {
                Promise.resolve(p).then(
                    value => {
                        list[index] = value
                        resolvedCount++
                        //如果全部成功，将状态置为成功
                        if (resolvedCount === promises.length) {
                            resolve(list)
                        }
                    },
                    reason => {//只要有一个失败了，return的promise就失败了
                        reject(reason)
                    }
                )
            })
        })


    }
    /**函数对象的方法 race*/
    Promise.race = function (promises) {
        let resolvedCount = 0
        return new Promise((resolve, reject) => {
            //遍历获取所有promise的结果
            promises.forEach((p, index) => {
                Promise.resolve(p).then(
                    value => {
                        //如果有一个成功，将状态置为成功if (resolvedCount === promises.length) {
                        resolve(value)
                    },
                    reason => {//只要有一个失败了，return的promise就失败了
                        reject(reason)
                    }
                )
            })
        })
    }
    /**自定义函数对象的方法 resolveDelay 返回一个函数在指定的时间后才确定结果*/
    Promise.resolveDelay = function (value,time=1000) {

        //返回一个成功或者失败的promise
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                try {
                    //    3、如果回调函数返回的是promise，return的promise结果就是这个promise 的结果
                    if (value instanceof Promise) {
                        value.then(resolve, reject)
                    } else {
                        // 2、如果回调函数不是promise,return的promise就会成功，value就是返回值
                        resolve(value)
                    }
                } catch (err) {
                    reject(err)
                }
            }, time)
        })
    }
    /**自定义函数对象的方法 rejectDelay 返回一个函数在指定的时间后才失败*/
    Promise.rejectDelay = function (value,time=1000) {
        setTimeout(() => {
            return new Promise((resolve, reject) => {
                reject(reason)
            })
        }, time)

    }
    window.Promise = Promise
})(window)

2、自定义Promise 类版本

(function (window) {
    const PENDING = "pending"
    const RESOLVED = "resolved"
    const REJECTED = "rejected"
    class Promise {
        constructor(excutor) {
            //给promise对象指定status属性，初始值为pending
            this.status = PENDING
            //给promise对象指定一个用于存储结果数据的属性
            this.data = undefined;
            //每个元素的结构 {onResolved(){},onrejected(){}}
            this.callbacks = []
            let self = this;
            function resolve(value) {
                //状态更改过以后不再执行
                if (self.status !== PENDING) {
                    return
                }
                //更改状态
                self.status = RESOLVED
                //保存value数据
                self.data = value
                //如果有待执行cakkback函数，立即异步执行回调函数
                if (self.callbacks.length > 0) {
                    setTimeout(() => {//放入队列中执行所有成功的回调
                        self.callbacks.forEach(callbacksObj => {
                            callbacksObj.onResolved(value)
                        });
                    })

                }
            }
            function reject(reason) {
                //状态更改过以后不再执行
                if (self.status !== PENDING) {
                    return
                }
                //更改状态
                self.status = REJECTED
                //保存value数据
                self.data = reason
                //如果有待执行cakkback函数，立即异步执行回调函数
                if (self.callbacks.length > 0) {
                    setTimeout(() => {//放入队列中执行所有失败的回调
                        self.callbacks.forEach(callbacksObj => {
                            callbacksObj.onRejected(reason)
                        });
                    })

                }
            }
            try {
                //立即同步执行excutor
                excutor(resolve, reject)
            } catch (error) {//如果执行器抛出异常
                reject(error)
            }
        }
        /**原型上的then*/
        then(onResolved, onRejected) {
            let self = 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(fn) {
                    /**
                         1、如果执行抛出异常 return的promise就会失败，reason就是error
                         2、如果回调函数不是promise,return的promise就会成功，value就是返回值
                         3、如果回调函数返回的是promise，return的promise结果就是这个promise 的结果
                        */
                    try {
                        let result = fn(self.data)
                        //    3、如果回调函数返回的是promise，return的promise结果就是这个promise 的结果
                        if (result instanceof Promise) {
                            result.then(resolve, reject)
                            //等价于
                            // result.then(
                            //     value => {resolve(value)},
                            //     reason => {reject(reason)}
                            // )
                        } else {
                            // 2、如果回调函数不是promise,return的promise就会成功，value就是返回值
                            resolve(result)
                        }
                    } catch (err) {
                        reject(err)
                    }
                }
                //如果状态还没有被更改此时缓存回调函数
                if (self.status === RESOLVED) {
                    //如果是状态已经更改过了，回调函数放入队列中，并改变promise的状态
                    setTimeout(() => {
                        handle(onResolved)
                    })
                } else if (self.status === REJECTED) {//rejected
                    //如果是状态已经更改过了，回调函数放入队列中
                    setTimeout(() => {
                        handle(onRejected)
                    })
                } else {
                    //当前还是pending状态，保存回调函数,
                    self.callbacks.push({
                        onResolved() {
                            handle(onResolved)
                        },
                        onRejected() {
                            handle(onRejected)
                        }
                    })
                }
            })
        }
        /**原型上的catch*/
        catch(onRejected) {
            return this.then(undefined, onRejected)

        }
        /**函数对象的方法 resolve*/
        static resolve = function (value) {
            //返回一个成功或者失败的promise
            return new Promise((resolve, reject) => {
                try {
                    //    3、如果回调函数返回的是promise，return的promise结果就是这个promise 的结果
                    if (value instanceof Promise) {
                        value.then(resolve, reject)
                    } else {
                        // 2、如果回调函数不是promise,return的promise就会成功，value就是返回值
                        resolve(value)
                    }
                } catch (err) {
                    reject(err)
                }
            })
        }
        /**函数对象的方法 reject*/
        static reject = function (reason) {
            return new Promise((resolve, reject) => {
                reject(reason)
            })
        }
        /**函数对象的方法 all*/
        static all = function (promises) {
            let list = new Array(promises.length)
            let resolvedCount = 0
            return new Promise((resolve, reject) => {
                //遍历获取所有promise的结果
                promises.forEach((p, index) => {
                    Promise.resolve(p).then(
                        value => {
                            list[index] = value
                            resolvedCount++
                            //如果全部成功，将状态置为成功
                            if (resolvedCount === promises.length) {
                                resolve(list)
                            }
                        },
                        reason => {//只要有一个失败了，return的promise就失败了
                            reject(reason)
                        }
                    )
                })
            })


        }
        /**函数对象的方法 race*/
        static race = function (promises) {
            let resolvedCount = 0
            return new Promise((resolve, reject) => {
                //遍历获取所有promise的结果
                promises.forEach((p, index) => {
                    Promise.resolve(p).then(
                        value => {
                            //如果有一个成功，将状态置为成功if (resolvedCount === promises.length) {
                            resolve(value)
                        },
                        reason => {//只要有一个失败了，return的promise就失败了
                            reject(reason)
                        }
                    )
                })
            })
        }
        /**自定义函数对象的方法 resolveDelay 返回一个函数在指定的时间后才确定结果*/
        static resolveDelay = function (value, time = 1000) {
            //返回一个成功或者失败的promise
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    try {
                        //    3、如果回调函数返回的是promise，return的promise结果就是这个promise 的结果
                        if (value instanceof Promise) {
                            value.then(resolve, reject)
                        } else {
                            // 2、如果回调函数不是promise,return的promise就会成功，value就是返回值
                            resolve(value)
                        }
                    } catch (err) {
                        reject(err)
                    }
                }, time)
            })
        }
        /**自定义函数对象的方法 rejectDelay 返回一个函数在指定的时间后才失败*/
        static ejectDelay = function (value, time = 1000) {
            setTimeout(() => {
                return new Promise((resolve, reject) => {
                    reject(reason)
                })
            }, time)

        }

    }
    window.Promise = Promise
})(window)