手写Promise

Promise

promise 的基本语法

目的：promise 是书写异步代码的另一种方式，解决回调函嵌套的问题

1. 如何创建一个promise 对象

const p = new Promise((resolve,reject)=>{
    //promise  内部一般可以封装一个异步操作
    //resolve reject 是 promise 内部提供好的两个函数
    //resolve 成功的回调=>将promise状态从pending改成fullfilled
    //rejuect 失败的回调=>rejeced
})

2. 如何使用一个promise 对象

p.then(res=>{....}) // 处理成功
 .catch(res=>{....})//处理失败

promise 的三个状态

• pending：等待（进行中）
• fulfilled：成功 （已完成），调用reslove，promise的状态会标记成成功
• rejected：失败（拒绝），promise的状态会被标记失败

一旦promise的状态发生了变化，状态就会被固定

手写Promise

第一步：创建Promise这个类

并且利用executor 实现Promise 内部的resolve和reject方法

class Promise {
    constructor(executor) {
        let resolve = () => {
            console.log('将状态改成成功，记录成功的信息')
        }
        let reject = () => {
            console.log('将状态改成失败，记录失败的信息')
        }
        executor(resolve, reject)
    }

}

//promise 里面的回调叫 executor函数
const p = new Promise((resolve, reject) => {
    //这里的代码是立即执行的
    console.log('resolve', resolve)
    console.log('reject', reject)
    console.log('立即执行')
})

console.log(p)

第二步：处理promise 中的三个状态

 class Promise {
            constructor(executor) {
                this.state = 'pending' //初始化state状态为pending状态
                this.value = undefined //记录成功的值
                this.reason = undefined //记录失败的值
                let resolve = (value) => {
                    //只有pending才能修改状态，其他状态不能修改状态
                    if (this.state == 'pending') {
                        // console.log('将状态改成成功，记录成功的信息')
                        this.state = 'fulfilled' //更新状态
                        this.value = value //记录成功的信息
                    }

                }
                let reject = (value) => {
                    //只有pending才能修改状态，其他状态不能修改状态
                    if (this.state == 'pending') {
                        // console.log('将状态改成失败，记录失败的信息')
                        this.state = 'rejected' //更新状态
                        this.reason = value//记录失败的信息
                    }

                }
                executor(resolve, reject)
            }

        }

        //promise 里面的回调叫 executor函数
        const p = new Promise((resolve, reject) => {
            //这里的代码是立即执行的
            // console.log('resolve', resolve)
            // console.log('reject', reject)
            // console.log('立即执行')
            // resolve('123')
            reject('错了')
        })

需要注意的：promise 一旦状态改变了，就不能在改变，所以在resolve和reject方法中需要添加一个判断：当前的状态只能是pending

第三步： 处理promise 的then 方法

class Promise {
            constructor(executor) {
                this.state = 'pending' //初始化state状态为pending状态
                this.value = undefined //记录成功的值
                this.reason = undefined //记录失败的值
                let resolve = (value) => {
                    //只有pending才能修改状态，其他状态不能修改状态
                    if (this.state == 'pending') {
                        // console.log('将状态改成成功，记录成功的信息')
                        this.state = 'fulfilled' //更新状态
                        this.value = value //记录成功的信息
                    }

                }
                let reject = (value) => {
                    //只有pending才能修改状态，其他状态不能修改状态
                    if (this.state == 'pending') {
                        // console.log('将状态改成失败，记录失败的信息')
                        this.state = 'rejected' //更新状态
                        this.reason = value//记录失败的信息
                    }

                }
                //如果执行executor报错，直接reject
                try {
                    executor(resolve, reject)
                } catch (err) {
                    reject(err)
                }

            }
            //在Promise 原型上添加 then 方法
            then(onFulfulled, onRejected) {
                console.log('我是then方法')
                if (this.state == 'fulfilled') {
                    //成功的回调
                    console.log(onFulfulled)
                    onFulfulled(this.value)
                }
                if (this.state == 'rejected') {
                    //失败的回调
                    onRejected(this.reason)
                }
            }

        }

        //promise 里面的回调叫 executor函数
        const p = new Promise((resolve, reject) => {
            resolve('200')
        })
        // p.then(onFulfulled,onRejected).catch(处理函数)
        // onFulfulled ==> p成功的回调 
        // onRejected ==> p失败的回调
        // catch  ===> 所有失败的回调 
        p.then(res => {
            console.log('成功输出结果：', res)
        }, err => {
            console.log('失败输出结果：', err)
        })

注意 then 方法其实有两个参数：onFulfilled 和 onRejected 方法，所以在Promise类上的原型上的then 方法 需要两个形参：onFulfilled/onRejected ,并且在对应的方法中判断当前的state 是哪个方法，如果是fulfilled 将value 传出，如果是rejected 将reason传出

第四步：promise 的异步处理

        class Promise {
            constructor(executor) {
                this.state = 'pending' //初始化state状态为pending状态
                this.value = undefined //记录成功的值
                this.reason = undefined //记录失败的值
                this.onResolvedCallbacks = [] //存放成功时，需要执行的函数列表 
                this.onRejectedCallbacks = [] //存放失败时，需要执行的函数列表 
                let resolve = (value) => {
                    //只有pending才能修改状态，其他状态不能修改状态
                    if (this.state == 'pending') {
                        // console.log('将状态改成成功，记录成功的信息')
                        this.state = 'fulfilled' //更新状态
                        this.value = value //记录成功的信息
                        //调用成功数组的函数，需要遍历执行
                        this.onResolvedCallbacks.forEach(fn => fn())
                    }

                }
                let reject = (value) => {
                    //只有pending才能修改状态，其他状态不能修改状态
                    if (this.state == 'pending') {
                        // console.log('将状态改成失败，记录失败的信息')
                        this.state = 'rejected' //更新状态
                        this.reason = value//记录失败的信息
                        //调用失败数组的函数，需要遍历执行
                        this.onRejectedCallbacks.forEach(fn => fn())
                    }

                }
                //如果执行executor报错，直接reject
                try {
                    executor(resolve, reject)
                } catch (err) {
                    reject(err)
                }

            }
            //在Promise 原型上添加 then 方法
            then(onFulfulled, onRejected) {
                console.log('我是then方法')
                if (this.state == 'fulfilled') {
                    //成功的回调
                    console.log(onFulfulled)
                    onFulfulled(this.value)
                }
                if (this.state == 'rejected') {
                    //失败的回调
                    onRejected(this.reason)
                }
                //当状态为pendding时
                if (this.state == 'pending') {
                    //将成功时候要干的事情，存起来
                    this.onResolvedCallbacks.push(() => {
                        onFulfulled(this.value)
                    })
                    //将失败的时候干的事情，存起来
                    this.onRejectedCallbacks.push(() => {
                        onRejected(this.reason)
                    })
                }
            }

        }

        //promise 里面的回调叫 executor函数
        const p = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('200')
            }, 1000)
        })
        p.then(res => {
            console.log('成功输出结果：', res)
        })
        p.then(res => {
            console.log('成功输出结果：', res)
        })
        p.then(res => {
            console.log('成功输出结果：', res)
        })

第五步：promise 的链式—普通调用

 class Promise {
            constructor(executor) {
                this.state = 'pending' //初始化state状态为pending状态
                this.value = undefined //记录成功的值
                this.reason = undefined //记录失败的值
                this.onResolvedCallbacks = [] //存放成功时，需要执行的函数列表 
                this.onRejectedCallbacks = [] //存放失败时，需要执行的函数列表 
                let resolve = (value) => {
                    //只有pending才能修改状态，其他状态不能修改状态
                    if (this.state == 'pending') {
                        // console.log('将状态改成成功，记录成功的信息')
                        this.state = 'fulfilled' //更新状态
                        this.value = value //记录成功的信息
                        //调用成功数组的函数，需要遍历执行
                        this.onResolvedCallbacks.forEach(fn => fn())
                    }

                }
                let reject = (value) => {
                    //只有pending才能修改状态，其他状态不能修改状态
                    if (this.state == 'pending') {
                        // console.log('将状态改成失败，记录失败的信息')
                        this.state = 'rejected' //更新状态
                        this.reason = value//记录失败的信息
                        //调用失败数组的函数，需要遍历执行
                        this.onRejectedCallbacks.forEach(fn => fn())
                    }

                }
                //如果执行executor报错，直接reject
                try {
                    executor(resolve, reject)
                } catch (err) {
                    reject(err)
                }

            }
            //在Promise 原型上添加 then 方法
            then(onFulfulled, onRejected) {
                console.log('我是then方法')
                let p = new Promise((resolve, reject) => {
                    if (this.state == 'fulfilled') {
                        //成功的回调
                        let x = onFulfulled(this.value)
                        resolve(x)
                    }
                    if (this.state == 'rejected') {
                        //失败的回调
                        onRejected(this.reason)
                    }
                    //当状态为pendding时
                    if (this.state == 'pending') {
                        //将成功时候要干的事情，存起来
                        this.onResolvedCallbacks.push(() => {
                            onFulfulled(this.value)
                        })
                        //将失败的时候干的事情，存起来
                        this.onRejectedCallbacks.push(() => {
                            onRejected(this.reason)
                        })
                    }
                })
                return p
            }

        }

        //promise 里面的回调叫 executor函数
        const p = new Promise((resolve, reject) => {
            resolve('200')
        })
        //核心要点1: 上一个 .then 要返回一个promise对象
        //核心要点2: 下一个 .then 的参数，要拿到上一个.then 的返回值 
        p.then(res => {
            console.log('成功输出结果：', res)
            return 500
        }).then(data => {
            console.log(data)
        })

第五步：promise 的链式—处理不同的情况

class Promise {
            constructor(executor) {
                this.state = 'pending' //初始化state状态为pending状态
                this.value = undefined //记录成功的值
                this.reason = undefined //记录失败的值
                this.onResolvedCallbacks = [] //存放成功时，需要执行的函数列表 
                this.onRejectedCallbacks = [] //存放失败时，需要执行的函数列表 
                let resolve = (value) => {
                    //只有pending才能修改状态，其他状态不能修改状态
                    if (this.state == 'pending') {
                        // console.log('将状态改成成功，记录成功的信息')
                        this.state = 'fulfilled' //更新状态
                        this.value = value //记录成功的信息
                        //调用成功数组的函数，需要遍历执行
                        this.onResolvedCallbacks.forEach(fn => fn())
                    }

                }
                let reject = (value) => {
                    //只有pending才能修改状态，其他状态不能修改状态
                    if (this.state == 'pending') {
                        // console.log('将状态改成失败，记录失败的信息')
                        this.state = 'rejected' //更新状态
                        this.reason = value//记录失败的信息
                        //调用失败数组的函数，需要遍历执行
                        this.onRejectedCallbacks.forEach(fn => fn())
                    }

                }
                //如果执行executor报错，直接reject
                try {
                    executor(resolve, reject)
                } catch (err) {
                    reject(err)
                }

            }
            //在Promise 原型上添加 then 方法
            then(onFulfulled, onRejected) {
                console.log('我是then方法')
                let p = new Promise((resolve, reject) => {
                    if (this.state == 'fulfilled') {
                        //成功的回调
                        let x = onFulfulled(this.value)
                        //推荐：将对x进行判断，对x进行处理代码的封装
                        //x是前一个 .then 的成功回调的返回值
                        //对x进行分析
                        //1. 如果是普通函数，直接调用resolve 
                        //2. 如果是promise对象，看promise是否成功
                        // 如果成功resolve 如果失败reject

                        // resolve(x)
                        resolvePromise(x, resolve, reject)
                    }
                    if (this.state == 'rejected') {
                        //失败的回调
                        onRejected(this.reason)
                    }
                    //当状态为pendding时
                    if (this.state == 'pending') {
                        //将成功时候要干的事情，存起来
                        this.onResolvedCallbacks.push(() => {
                            onFulfulled(this.value)
                        })
                        //将失败的时候干的事情，存起来
                        this.onRejectedCallbacks.push(() => {
                            onRejected(this.reason)
                        })
                    }
                })
                return p
            }

        }


        function resolvePromise(x, resolve, reject) {
            //判断x 是否是一个promise 对象
            if (x instanceof Promise) {
                //是promise 对象
                x.then((value) => {
                    resolve(value)
                }, err => {
                    reject(err)
                })

            } else {
                resolve(x)
            }

        }
        //promise 里面的回调叫 executor函数
        const p = new Promise((resolve, reject) => {
            resolve('200')
        })
        //核心要点1: 上一个 .then 要返回一个promise对象
        //核心要点2: 下一个 .then 的参数，要拿到上一个.then 的返回值 
        p.then(res => {
            console.log('成功输出结果：', res)
            return new Promise((resolve, reject) => {
                resolve(500)
            })
        }).then(data => {
            console.log(data)
        })

第五步：promise 的链式—处理循环调用问题

        class Promise {
            constructor(executor) {
                this.state = 'pending' //初始化state状态为pending状态
                this.value = undefined //记录成功的值
                this.reason = undefined //记录失败的值
                this.onResolvedCallbacks = [] //存放成功时，需要执行的函数列表 
                this.onRejectedCallbacks = [] //存放失败时，需要执行的函数列表 
                let resolve = (value) => {
                    //只有pending才能修改状态，其他状态不能修改状态
                    if (this.state == 'pending') {
                        // console.log('将状态改成成功，记录成功的信息')
                        this.state = 'fulfilled' //更新状态
                        this.value = value //记录成功的信息
                        //调用成功数组的函数，需要遍历执行
                        this.onResolvedCallbacks.forEach(fn => fn())
                    }

                }
                let reject = (value) => {
                    //只有pending才能修改状态，其他状态不能修改状态
                    if (this.state == 'pending') {
                        // console.log('将状态改成失败，记录失败的信息')
                        this.state = 'rejected' //更新状态
                        this.reason = value//记录失败的信息
                        //调用失败数组的函数，需要遍历执行
                        this.onRejectedCallbacks.forEach(fn => fn())
                    }

                }
                //如果执行executor报错，直接reject
                try {
                    executor(resolve, reject)
                } catch (err) {
                    reject(err)
                }

            }
            //在Promise 原型上添加 then 方法
            then(onFulfulled, onRejected) {
                console.log('我是then方法')
                let p = new Promise((resolve, reject) => {
                    if (this.state == 'fulfilled') {
						//需要使用异步，防止拿不到 p
                        setTimeout(() => {
                            //成功的回调
                            let x = onFulfulled(this.value)
                            //推荐：将对x进行判断，对x进行处理代码的封装
                            //x是前一个 .then 的成功回调的返回值
                            //对x进行分析
                            //1. 如果是普通函数，直接调用resolve 
                            //2. 如果是promise对象，看promise是否成功
                            // 如果成功resolve 如果失败reject

                            // resolve(x)
                            resolvePromise(x, resolve, reject, p)
                        }, 0)

                    }
                    if (this.state == 'rejected') {

                        setTimeout(() => {
                            //失败的回调
                            onRejected(this.reason)
                        })
                    }
                    //当状态为pendding时
                    if (this.state == 'pending') {
                        setTimeout(() => {
                            //将成功时候要干的事情，存起来
                            this.onResolvedCallbacks.push(() => {
                                onFulfulled(this.value)
                            })
                            //将失败的时候干的事情，存起来
                            this.onRejectedCallbacks.push(() => {
                                onRejected(this.reason)
                            })
                        }, 0)
                    }
                })
                return p
            }

        }


        function resolvePromise(x, resolve, reject, p) {
            if (x === p) {
                const err = new Error('出错了，循环调用了')
                console.error(err)
                return reject(err)
            }
            //判断x 是否是一个promise 对象
            if (x instanceof Promise) {
                //是promise 对象
                x.then((value) => {
                    resolve(value)
                }, err => {
                    reject(err)
                })

            } else {
                resolve(x)
            }

        }
        //promise 里面的回调叫 executor函数
        const p = new Promise((resolve, reject) => {
            resolve('500')
        })
        const p2 = p.then((data) => {
            console.log(data)
            return p2
        })
        p2.then(() => { }, err => console.log(err))

第五步：promise 的四个静态方法

promise.resolve()

        class Promise {
            constructor(executor) {
                this.state = 'pending' //初始化state状态为pending状态
                this.value = undefined //记录成功的值
                this.reason = undefined //记录失败的值
                this.onResolvedCallbacks = [] //存放成功时，需要执行的函数列表 
                this.onRejectedCallbacks = [] //存放失败时，需要执行的函数列表 
                let resolve = (value) => {
                    //只有pending才能修改状态，其他状态不能修改状态
                    if (this.state == 'pending') {
                        // console.log('将状态改成成功，记录成功的信息')
                        this.state = 'fulfilled' //更新状态
                        this.value = value //记录成功的信息
                        //调用成功数组的函数，需要遍历执行
                        this.onResolvedCallbacks.forEach(fn => fn())
                    }

                }
                let reject = (value) => {
                    //只有pending才能修改状态，其他状态不能修改状态
                    if (this.state == 'pending') {
                        // console.log('将状态改成失败，记录失败的信息')
                        this.state = 'rejected' //更新状态
                        this.reason = value//记录失败的信息
                        //调用失败数组的函数，需要遍历执行
                        this.onRejectedCallbacks.forEach(fn => fn())
                    }

                }
                //如果执行executor报错，直接reject
                try {
                    executor(resolve, reject)
                } catch (err) {
                    reject(err)
                }

            }
            //在Promise 原型上添加 then 方法
            then(onFulfulled, onRejected) {
                // console.log('我是then方法')
                let p = new Promise((resolve, reject) => {
                    if (this.state == 'fulfilled') {

                        setTimeout(() => {
                            //成功的回调
                            let x = onFulfulled(this.value)
                            //推荐：将对x进行判断，对x进行处理代码的封装
                            //x是前一个 .then 的成功回调的返回值
                            //对x进行分析
                            //1. 如果是普通函数，直接调用resolve 
                            //2. 如果是promise对象，看promise是否成功
                            // 如果成功resolve 如果失败reject

                            // resolve(x)
                            resolvePromise(x, resolve, reject, p)
                        }, 0)

                    }
                    if (this.state == 'rejected') {

                        setTimeout(() => {
                            //失败的回调
                            onRejected(this.reason)
                        })
                    }
                    //当状态为pendding时
                    if (this.state == 'pending') {
                        setTimeout(() => {
                            //将成功时候要干的事情，存起来
                            this.onResolvedCallbacks.push(() => {
                                onFulfulled(this.value)
                            })
                            //将失败的时候干的事情，存起来
                            this.onRejectedCallbacks.push(() => {
                                onRejected(this.reason)
                            })
                        }, 0)
                    }
                })
                return p
            }

        }


        function resolvePromise(x, resolve, reject, p) {
            if (x === p) {
                const err = new Error('出错了，循环调用了')
                console.error(err)
                return reject(err)
            }
            //判断x 是否是一个promise 对象
            if (x instanceof Promise) {
                //是promise 对象
                x.then((value) => {
                    resolve(value)
                }, err => {
                    reject(err)
                })

            } else {
                resolve(x)
            }

        }
        //promise.resolve()
      Promise.resolve = function (value){
          return new Promise((resolve,reject)=>{
              resolve(value)
          })
      }
	
	Promise.resolve(200).then(data=>{
        console.log(data)
    })

promise.reject()

        class Promise {
            constructor(executor) {
                this.state = 'pending' //初始化state状态为pending状态
                this.value = undefined //记录成功的值
                this.reason = undefined //记录失败的值
                this.onResolvedCallbacks = [] //存放成功时，需要执行的函数列表 
                this.onRejectedCallbacks = [] //存放失败时，需要执行的函数列表 
                let resolve = (value) => {
                    //只有pending才能修改状态，其他状态不能修改状态
                    if (this.state == 'pending') {
                        // console.log('将状态改成成功，记录成功的信息')
                        this.state = 'fulfilled' //更新状态
                        this.value = value //记录成功的信息
                        //调用成功数组的函数，需要遍历执行
                        this.onResolvedCallbacks.forEach(fn => fn())
                    }

                }
                let reject = (value) => {
                    //只有pending才能修改状态，其他状态不能修改状态
                    if (this.state == 'pending') {
                        // console.log('将状态改成失败，记录失败的信息')
                        this.state = 'rejected' //更新状态
                        this.reason = value//记录失败的信息
                        //调用失败数组的函数，需要遍历执行
                        this.onRejectedCallbacks.forEach(fn => fn())
                    }

                }
                //如果执行executor报错，直接reject
                try {
                    executor(resolve, reject)
                } catch (err) {
                    reject(err)
                }

            }
            //在Promise 原型上添加 then 方法
            then(onFulfulled, onRejected) {
                // console.log('我是then方法')
                let p = new Promise((resolve, reject) => {
                    if (this.state == 'fulfilled') {

                        setTimeout(() => {
                            //成功的回调
                            let x = onFulfulled(this.value)
                            //推荐：将对x进行判断，对x进行处理代码的封装
                            //x是前一个 .then 的成功回调的返回值
                            //对x进行分析
                            //1. 如果是普通函数，直接调用resolve 
                            //2. 如果是promise对象，看promise是否成功
                            // 如果成功resolve 如果失败reject

                            // resolve(x)
                            resolvePromise(x, resolve, reject, p)
                        }, 0)

                    }
                    if (this.state == 'rejected') {

                        setTimeout(() => {
                            //失败的回调
                            onRejected(this.reason)
                        })
                    }
                    //当状态为pendding时
                    if (this.state == 'pending') {
                        setTimeout(() => {
                            //将成功时候要干的事情，存起来
                            this.onResolvedCallbacks.push(() => {
                                onFulfulled(this.value)
                            })
                            //将失败的时候干的事情，存起来
                            this.onRejectedCallbacks.push(() => {
                                onRejected(this.reason)
                            })
                        }, 0)
                    }
                })
                return p
            }

        }


        function resolvePromise(x, resolve, reject, p) {
            if (x === p) {
                const err = new Error('出错了，循环调用了')
                console.error(err)
                return reject(err)
            }
            //判断x 是否是一个promise 对象
            if (x instanceof Promise) {
                //是promise 对象
                x.then((value) => {
                    resolve(value)
                }, err => {
                    reject(err)
                })

            } else {
                resolve(x)
            }

        }
Promise.reject=function(err){
    retrun new Promise((resolve,reject)=>{
        reject(err)
    })
}

Promise.reject(500).then(err=>{
    console.log(err)
})

promise.race()

        class Promise {
            constructor(executor) {
                this.state = 'pending' //初始化state状态为pending状态
                this.value = undefined //记录成功的值
                this.reason = undefined //记录失败的值
                this.onResolvedCallbacks = [] //存放成功时，需要执行的函数列表 
                this.onRejectedCallbacks = [] //存放失败时，需要执行的函数列表 
                let resolve = (value) => {
                    //只有pending才能修改状态，其他状态不能修改状态
                    if (this.state == 'pending') {
                        // console.log('将状态改成成功，记录成功的信息')
                        this.state = 'fulfilled' //更新状态
                        this.value = value //记录成功的信息
                        //调用成功数组的函数，需要遍历执行
                        this.onResolvedCallbacks.forEach(fn => fn())
                    }

                }
                let reject = (value) => {
                    //只有pending才能修改状态，其他状态不能修改状态
                    if (this.state == 'pending') {
                        // console.log('将状态改成失败，记录失败的信息')
                        this.state = 'rejected' //更新状态
                        this.reason = value//记录失败的信息
                        //调用失败数组的函数，需要遍历执行
                        this.onRejectedCallbacks.forEach(fn => fn())
                    }

                }
                //如果执行executor报错，直接reject
                try {
                    executor(resolve, reject)
                } catch (err) {
                    reject(err)
                }

            }
            //在Promise 原型上添加 then 方法
            then(onFulfulled, onRejected) {
                // console.log('我是then方法')
                let p = new Promise((resolve, reject) => {
                    if (this.state == 'fulfilled') {

                        setTimeout(() => {
                            //成功的回调
                            let x = onFulfulled(this.value)
                            //推荐：将对x进行判断，对x进行处理代码的封装
                            //x是前一个 .then 的成功回调的返回值
                            //对x进行分析
                            //1. 如果是普通函数，直接调用resolve 
                            //2. 如果是promise对象，看promise是否成功
                            // 如果成功resolve 如果失败reject

                            // resolve(x)
                            resolvePromise(x, resolve, reject, p)
                        }, 0)

                    }
                    if (this.state == 'rejected') {

                        setTimeout(() => {
                            //失败的回调
                            onRejected(this.reason)
                        })
                    }
                    //当状态为pendding时
                    if (this.state == 'pending') {
                        setTimeout(() => {
                            //将成功时候要干的事情，存起来
                            this.onResolvedCallbacks.push(() => {
                                onFulfulled(this.value)
                            })
                            //将失败的时候干的事情，存起来
                            this.onRejectedCallbacks.push(() => {
                                onRejected(this.reason)
                            })
                        }, 0)
                    }
                })
                return p
            }

        }


        function resolvePromise(x, resolve, reject, p) {
            if (x === p) {
                const err = new Error('出错了，循环调用了')
                console.error(err)
                return reject(err)
            }
            //判断x 是否是一个promise 对象
            if (x instanceof Promise) {
                //是promise 对象
                x.then((value) => {
                    resolve(value)
                }, err => {
                    reject(err)
                })

            } else {
                resolve(x)
            }

        }

	Promise.race = function(promises){
      //遍历promises，看谁先满足条件，谁先满足条件，就先让外层的promise resolve
      //promise的状态只能被修改一次，只要第一次改了，就成功，后续再改，也无效
        return new Promise((resolve,reject)=>{
            for(let i = 0; i < promises.length;i++){
                promises[i].then(value=>{
                    resolve(value)
                },err=>{
                    reject(err)
                })
            }
        })
    }

	let p1 = new Promise((resolve,reject)=>{
        setTimeout(()=>{
			console.log(1)
        },1000)
    })
    let p2 = new Promise((resolve,reject)=>{
        setTimeout(()=>{
			console.log(2)
        },2000)
    })
    let p3 = new Promise((resolve,reject)=>{
        setTimeout(()=>{
			console.log(3)
        },3000)
    })
    
    Promise.race([p1,p2,p3])

promise.all()

        class Promise {
            constructor(executor) {
                this.state = 'pending' //初始化state状态为pending状态
                this.value = undefined //记录成功的值
                this.reason = undefined //记录失败的值
                this.onResolvedCallbacks = [] //存放成功时，需要执行的函数列表 
                this.onRejectedCallbacks = [] //存放失败时，需要执行的函数列表 
                let resolve = (value) => {
                    //只有pending才能修改状态，其他状态不能修改状态
                    if (this.state == 'pending') {
                        // console.log('将状态改成成功，记录成功的信息')
                        this.state = 'fulfilled' //更新状态
                        this.value = value //记录成功的信息
                        //调用成功数组的函数，需要遍历执行
                        this.onResolvedCallbacks.forEach(fn => fn())
                    }

                }
                let reject = (value) => {
                    //只有pending才能修改状态，其他状态不能修改状态
                    if (this.state == 'pending') {
                        // console.log('将状态改成失败，记录失败的信息')
                        this.state = 'rejected' //更新状态
                        this.reason = value//记录失败的信息
                        //调用失败数组的函数，需要遍历执行
                        this.onRejectedCallbacks.forEach(fn => fn())
                    }

                }
                //如果执行executor报错，直接reject
                try {
                    executor(resolve, reject)
                } catch (err) {
                    reject(err)
                }

            }
            //在Promise 原型上添加 then 方法
            then(onFulfulled, onRejected) {
                // console.log('我是then方法')
                let p = new Promise((resolve, reject) => {
                    if (this.state == 'fulfilled') {

                        setTimeout(() => {
                            //成功的回调
                            let x = onFulfulled(this.value)
                            //推荐：将对x进行判断，对x进行处理代码的封装
                            //x是前一个 .then 的成功回调的返回值
                            //对x进行分析
                            //1. 如果是普通函数，直接调用resolve 
                            //2. 如果是promise对象，看promise是否成功
                            // 如果成功resolve 如果失败reject

                            // resolve(x)
                            resolvePromise(x, resolve, reject, p)
                        }, 0)

                    }
                    if (this.state == 'rejected') {

                        setTimeout(() => {
                            //失败的回调
                            onRejected(this.reason)
                        })
                    }
                    //当状态为pendding时
                    if (this.state == 'pending') {
                        setTimeout(() => {
                            //将成功时候要干的事情，存起来
                            this.onResolvedCallbacks.push(() => {
                                onFulfulled(this.value)
                            })
                            //将失败的时候干的事情，存起来
                            this.onRejectedCallbacks.push(() => {
                                onRejected(this.reason)
                            })
                        }, 0)
                    }
                })
                return p
            }

        }


        function resolvePromise(x, resolve, reject, p) {
            if (x === p) {
                const err = new Error('出错了，循环调用了')
                console.error(err)
                return reject(err)
            }
            //判断x 是否是一个promise 对象
            if (x instanceof Promise) {
                //是promise 对象
                x.then((value) => {
                    resolve(value)
                }, err => {
                    reject(err)
                })

            } else {
                resolve(x)
            }

        }

	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(value=>{
                    arr[i] = value
                    count ++ 
                    if(count === promises.length){
                        resolve(arr)
                    }
             
                },err=>{
                    reject(err)
                })
            }
        })
    }

	let p1 = new Promise((resolve,reject)=>{
        setTimeout(()=>{
			console.log(1)
        },1000)
    })
    let p2 = new Promise((resolve,reject)=>{
        setTimeout(()=>{
			console.log(2)
        },2000)
    })
    let p3 = new Promise((resolve,reject)=>{
        setTimeout(()=>{
			console.log(3)
        },3000)
    })
    
    Promise.race([p1,p2,p3])