手写Promise（自定义Promise）

首先我们得先理解Promise工作的机制，其实Promise就是一个构造函数

它的内部有三个状态：

• pending
• resolved
• rejected

而想改变这三个状态必须要通过resolve()或者reject()这两个方法，resolve（）可以将pending转换为resolved，rejected（）可以将pending转换为rejected。并且将得到的数值存储在内部的data里面。并且这状态一旦转换是不可逆的。

Promsie的原型对象含有then，catch这两个方法

• then这个方法可以接受两个参数，一个成功的回调，一个失败的回调。也就是onResolved和onRejected
• catch这个方法只可以接受一个参数，失败的回调，也就是onRejected
• 并且then这个方法，是返回一个新的promise对象，它里面的执行方法也是异步的
• 触发then的时候，也会有三个可能，一个是状态为resolved时，一个是状态为rejected时，一个是状态为pending时
• Promise的结果根据执行的结果返回

然后就可以开始自定义实现Promise了

一、大致框架列出来

• Promise函数会接受一个构造器，也就是接受一个函数，我们就命名为executor，executor会调用resolve和reject，所以我们就可以写resolve和reject这两个方法
• 定义pending,resolved,rejected。因为后面会多处用到，避免书写错误，导致出现不必要的BUG
• 内部存储状态，和数据，初始状态为pending，初始值为undefind
• Promise原型链上有then和catch两个方法
• Promise函数对象有resolve,reject,all,race方法

(function () {
const PENDING = 'pending'
const RESOLVED = 'resolved'
const REJECTED = 'rejected'
function Promise(executor){
     this.status = PENDING
     this.data = undefind
     this.callbacks = []
      resolve = () => {
      }
      reject = () => {
      }
      try {
          executor(resolve, reject)
      } catch (e) {
          reject(e)
      }
     Promise.prototype.then = () => {
     }
     Promise.prototype.catch = () => {
     }
      /*Promise函数对象的方法*/
     Promise.resolve = function (value) {

     }
     Promise.reject = function (error) {

     }
    /*只有当所有promise成功时才成功*/
     Promise.all = function (promises) {

     }
    /*其结果由第一个完成的promise决定*/
     Promise.race = function (promises) {
     }
executor(resolve,reject)
}
window.Promise = Promise
})()

二、写函数内部resolve/reject方法

• 我们改变promise对象的状态只能通过resolve/reject改变，所以当我们触发方法，首先得改变状态，然后存储值
• 我们最开始已经定义了常量，所以直接用定义的值
• 因为resolve/reject改变状态只能从pending开始，所以判断如果状态不是pending的时候，就不用执行下面代码了。

resolve = (value) => {
    if(this.satus !== PENDING){
       return
    }
    this.status = RESOLVED
    this.data = value
   if (this.callbacks.length > 0) {
                setTimeout(() => {
                    this.callbacks.forEach(callbacksObj => {
                        callbacksObj.onResolved(value)
                    })
                })
            }
}
reject = (error) => {
    if(this.satus !== PENDING){
       return
    }
    this.status = REJECTED
    this.data = error
   if (this.callbacks.length > 0) {
                setTimeout(() => {
                    this.callbacks.forEach(callbacksObj => {
                        callbacksObj.onRejected(error)
                    })
                })
            }
}

三、重头戏开始，写原型对象then方法，Promise的结果根据执行的结果返回

• 当我们调用then的时候，会传入两个回调函数
• then方法返回的是一个新的promise对象
• 我们调用then时需要考虑三个结果，也就是当前状态为pending时，为resolved时，为rejected时
• then里面所执行的方法是异步的
• 定义一个公共方法handle，减少代码冗余性
• 当我们调用handle函数也要考虑三种情况，因为promise的结果是根据执行的结果返回

Promise.prototype.then = (onResolved,onRejected) => {
   return new Promise((resolve,reject) => {
      function handle(callback){
           /*  
              1、如果抛出异常，return的promise就会失败
                2、如果回调函数返回的不是promise，return就会成功
                 3、如果回调函数返回的是promise,return的promise结果就是这个promise的结果
           */
            try {
               const result = callback(self.data)
               if (result instanceof Promise) {  //instanceof 运算符用来检测 Promise.prototype 是否存在于参数 result 的原型链
                    result.then(
                          value => {resolve(value)},
                           error => {reject(error)},
                     )
                            //result.then(resolve, reject)
                     } else {
                           resolve(result)
                     }
                     } catch (e) {
                        reject(e)
                     }
      }

      if(this.status === PENDING){
                 this.callbacks.push({
                        onResolved: () => {
                            handle(onResolved)
                        },
                        onRejected: () => {
                            handle(onRejected)
                        }
                    })
      } else if(this.status === RESOLVED){
          setTimeout(() => {
              handle(onRejected)
          })
      } else if(this.status === REJECTED){
          setTimeout(() => {
              handle(onResolved)
          })
      }
   })
}

四、写原型对象catch方法

 Promise.prototype.catch = function (onRejected) {
            return this.then(undefined,onRejected)
        }