浅析promise，手撕一个简单的promise

什么是promise

promise可以理解为一个承诺，他会承诺给你返回一个结果，不论是成功还是失败；它本事是一个对象，包含then方法的一个对象或者是函数。

为什么需要promise

1.写一个异步定时

    setTimeout(() => {
        console.log('Time out')
    },2000)

2.写一个异步请求

    request.onreadystatechange = () => {
        if(request.readySttate === 4) {
            const _status = request.status
            if(_status === 200) {
                const _res = request.responesText
                return success(_res)
            } else {
                return fail(_status)
            }
        }
    }

3.延时后再请求

    setTimeout(() => {
        console.log('Time out')
        request.onreadystatechange = () => {
            if(request.readyState === 4) {
                const _status = request.statue
                if (_status === 200) {
                    const _res = request.responseText
                    return success(_res)
                } else {
                    return fail(_status)
                }
            }
        }
    }, 2000)

4.在延时请求的基础上再进行延时请求-----就会产生回调地狱

     setTimeout(() => {
        console.log('Time out')
        request.onreadystatechange = () => {
            if(request.readyState === 4) {
                const _status = request.statue
                if (_status === 200) {
                    const _res = request.responseText
                    setTimeout(() => {
                        console.log('Time out')
                        request.onreadystatechange = () => {
                            if(request.readyState === 4) {
                                const _status = request.statue
                                if (_status === 200) {
                                    const _res = request.responseText
                                    return success(_res)
                                } else {
                                    return fail(_status)
                                }
                            }
                        }
                    }, 2000)
                    return success(_res)
                } else {
                    return fail(_status)
                }
            }
        }
    }, 2000)

5.promise的出现，拯救了回调地狱的无穷嵌套

    new Promise((resolve,reject) => {
        setTimeout(() =>{
            resolve('ok')
        },1000)
    }).then(res => {
        console.log('then' + res)
    }).cath(err => {
        console.log('catch' + err)
    })

6.多个异步顺序执行 => 链式调用

   function wait500(input) {
       return new Promise((resolve,reject) => {
           setTimeout(() => {
               resolve(input + 500)
           },500)
       })
   }
   function wait1000(input) {
       return new Promise((resolve,reject) => {
           setTimeout(() => {
               resolve(input + 1000)
           },1000)
       })
   }
   const p = new Promise((resolve, reject) => {
       resolve(1)
   })
   p.then(wait500)
   .then(wait1000)
   .then(wait500)
   .then(wait1000)
   .then(result => {
       console.log('end' + result)
   })

7.全部执行完成后再操作

    Promise.all([wait500(20),wait1000]).then(result => {
        console.log('all end',result)
        //[520,f]
    })

8.一旦有执行完成的，立即操作

    Promise.race([wait500(20),wait1000(100)]).then(result => {
        console.log('race end' ,result)
        //520
    })

解析promise

promise有哪些状态？对应的值是？--pedding、fulfilled、rejected；
new Promise执行器exector()，执行参数是？--resolve、reject
promise的默认状态是？promise状态的转换有几种？分别是？--padidng，两种，padidng -> fulfilled、padding -> rejected
promise，value保存成功状态的枚举？--undefind/thenable/promise
promise，失败状态值？--reason保存失败
promise一定会有then，then接受来源两个回调onFullfilled(value) + onRefected(reson)

   //三个状态：PENDING FULFILLED REJECTED
   const PENDING = 'PENDING'
   const FULFILLED = 'FULFILLED'
   const REJECTED = 'REJECTED'
   
   class Promise {
       constructor(executor) {
           //默认状态的处理：PENDING
           this.status = PENDING
           
           //成功状态的值
           this.value = undifined
           //失败状态的值
           this.reason = undifind
           
           //成功状态的回调
           let resolve = value => {
               if (this.status === PENDING) {
                   this.status = FULFILLED
                   this.value = value
               }
           }
           //失败状态的回调
           let reject = reason => {
               if(this.status === PENDING)
                  this.status = REJECTED
                  this.reason = reason
           }
       }
       
       try {
           exectutor(resolve,reject)
       } catch (err){
           reject(error)
       }
       
       then(onFulfilled,onRejected) {
           if(this.status === FULFILLED) {
               onFulfilled(this.value)
           }
           
           if(this.status === REJECTED) {
               onRejected(this.reason)
           }
       }
       
       
   }
   
   // 异步
    // 区别 - 依次调用
    class Promise { // 类
        constructor(executor) { // 构造
            // 默认状态的处理: PENDING
            this.status = PENDING

            // 成功状态的值
            this.value = undefined
            // 失败状态的值
            this.reason = undefined

            // 存放成功的回调
            this.onResolvedCallbacks = []
            // 存放失败的回调
            this.onRejectedCallbacks = []

            // 成功状态的回调
            let resolve = value => {
                if (this.status === PENDING) {
                    this.status = FULFILLED
                    this.value = value

                    // 依次调用对应函数的执行
                    (this.onResolvedCallbacks || []).forEach(fn => fn())
                }
            }

            // 失败状态的回调
            let reject = reason => {
                if (this.status === PENDING) {
                    this.status = REJECTED
                    this.reason = reason

                    // 依次调用对应函数的执行
                    (this.onRejectedCallbacks || []).forEach(fn => fn())
                }
            }

            try {
                executor(resolve, reject)
            } catch (error) {
                reject(error)
            }
        }

        then(onFulfilled, onRejected) {
            if (this.status === FULFILLED) {
                onFulfilled(this.value)
            }

            if (this.status === REJECTED) {
                onRejected(this.reason)
            }

            if (this.status === PENDING) {
                this.onResolvedCallbacks.push(() => {
                    onFulfilled(this.value)
                })
                this.onRejectedCallbacks.push(() => {
                    onRejected(this.reason)
                })
            }
        }
    }

    // 启示：同步 => 异步
    // 顺序和空间的关系