用通俗的语言,由浅入深一步一个脚印，自己手写一个promise

** 先看一个最简陋的promise **

let p=new Promise(function(resolev,reject){
    console.log('执行')
  })

这时会在浏览器打出 “执行”.... 从这里可以推断出promise的结构应该是:

定义promise,传递一个参数,这个参数 是一个函数 并包含两个方法 resolve,reject,这个函数在promise内部是立即执行的

function Promise(executor){
    function resolve(){ }
    function reject(){ }
    //其实可以把这个executor看成是一个自执行函数
    /*
    类似
        (function(resolev,reject){
            console.log('执行') 
        })(resolve,reject)
    */
    executor(resolve,reject)
}

---

promise有三种状态， pending(等待状态)，resolved(成功状态)，rejected(失败状态),而且状态一经改变就不会再变~所以只会有两种情况

pending——————>resolved 等待——————>成功 成功了就不能失败...

pending——————>rejected 等待——————>失败 失败了就不能成功...ರ_ರ

//原生promise
let p=new Promise(function(resolev,reject){
    //只会调用最前面的这个
    resolve(100)
    rejecte(200)
  })
  p.then(function(data){
      console.log(data,'resolved')
  },function(error){
      console.log(error,'rejecte')
  })

原生promise中,resolve和reject 只会调用其中在最前面的一个。。并且调用resolve会执行then中的第一个回调，调用reject会执行then中的第二个回调

要实现这样的效果需要在我们自己的promise函数内

• 定义 status,存储当前的状态
• 定义 value, 存储resolve成功 调用时传过来的值
• 定义 reason,存储 reject失败 调用的报错信息
• 定义一个then函数,并接收两个类型为函数的参数，第一个是成功的回调，第二个是失败的回调
• 从promise中的 then方法可以看出~这两个方法只有一个会被执行

---

function Promise(executor) {
    let self = this
    this.status = 'pending' //当前状态
    this.value = undefined  //存储成功的值
    this.reason = undefined //存储失败的原因
    function resolve(value) {
      if (self.status == 'pending') {
        self.status = 'resolved'
        self.value = value
      }
    }
    function reject(error) {
      if (self.status == 'pending') {
        self.status = 'rejected'
        self.reason = error
      }
    }
    executor(resolve, reject)
  }
  Promise.prototype.then = function (infulfilled, inrejected) {
   //由status決定,只有一个方法会被执行
    if (this.status == 'resolved') {
      infulfilled(this.value)
    }
    if (this.status == 'rejected') {
      inrejected(this.reason)
    }
  }

现在这个promise已经有点样子了..但是离完善还差了很远~因为promise的亮点就是解决异步回调地狱的问题,但是这个手写的promise只支持同步代码，例子如下:

//用了自己的promise~不是原生的~~~！
let p = new Promise(function (resolve, reject) {
  setTimeout(() => {
    resolve(100)
  },1000)
})
//控制台没有打印任何东西
p.then(function (data) {
  console.log(data, 'resolve')
}, function (error) {
  console.log(error, 'reject')
})

可以看到，这里的then方法没有执行，为什么呢~~~

其实已经执行过了..只是因为现在的状态还是pending等待态。。。并不满足两个if条件里的任何一个。。所以直接略过了，

现在来分析下为什么会这样呢

• 当我们 new Promise(function (resolve, reject) { setTimeout(() => { resolve(100) },1000) }) 的时候 executor()会立即执行，不过别忘了这有个 setTimeout,所以executor()里面的动作 需要等1000ms
• 但是~由于同步函数比异步函数快的原因，所以这时then方法开始执行了,然而这时 Promise内部的status仍然是pending等待状态，then方法扫描了一下内部...发现status不满足任何一个条件,so..it's ending...结束
• 1000ms过后,executor()中的resolve开始执行了, 它把status改成了resolved,把值赋给了value..然而并没有后续动作了,so..it's ending...

---

让自己的promise支持异步调用

• 在 promise中定义两个数组 onResovedCallbacks,和 onRejectedCallbacks，用来存放成功和失败的回调函数
• 在then中判断status 如果是 pending等待状态 ，那就把成功的回调和失败的回调分别存到上面两个数组内
• 在promise的resolve和reject方法中分别遍历onResovedCallbacks和onRjectedCallbacks,执行其中的方法,代码如下

 function Promise(executor) {
    let self = this
    this.status = 'pending' //当前状态
    this.value = undefined  //存储成功的值
    this.reason = undefined //存储失败的原因
    this.onResolvedCallbacks = []//存储成功的回调
    this.onRejectedCallbacks = []//存储失败的回调
    function resolve(value) {
      if (self.status == 'pending') {
        self.status = 'resolved'
        self.value = value
        //遍历,执行其中的infulfilled()方法
        self.onResolvedCallbacks.forEach(fn => fn());
      }
    }
    function reject(error) {
      if (self.status == 'pending') {
        self.status = 'rejected'
        self.reason = error
        //遍历,执行其中的inRejected()方法
        self.onRejectedCallbacks.forEach(fn => fn())
      }
    }
    executor(resolve, reject)
  }
  Promise.prototype.then = function (infulfilled, inrejected) {
    let self = this
    if (this.status == 'resolved') {
      infulfilled(this.value)
    }
    if (this.status == 'rejected') {
      inrejected(this.reason)
    }
    if (this.status == 'pending') {
       //这时既不是resolved也是不是rejected状态
      this.onResolvedCallbacks.push(function () {
        infulfilled(self.value)
      })
      this.onRejectedCallbacks.push(function () {
        inrejected(self.reason)
      })
    }
  }
   let p = new Promise(function (resolve, reject) {
    setTimeout(() => {
      resolve(100)
    }, 2000)
  })
  p.then(function (data) {
    console.log(data, 'resolve')
  }, function (error) {
    console.log(error, 'reject')
  })

现在可以试一下setTimeout ,嗯~已经支持异步调用了~

不过还有一种情况，就是当new Promise()中抛出了异常，例如

let p = new Promise(function (resolve, reject) {
    throw new Error('错误')
  })
  p.then(function (data) {
    console.log(data, 'resolve')
  }, function (error) {
    console.log(error, 'reject')
  })

这种情况下 then方法中,成功和失败的回调函数也不会被调用,只会报个错,因为现在的status还是pending那就需要我们在promise函数内部捕获一下异常 :

 function Promise(executor) {
    let self = this
    this.status = 'pending' //当前状态
    this.value = undefined  //存储成功的值
    this.reason = undefined //存储失败的原因
    this.onResolvedCallbacks = []//存储成功的回调
    this.onRejectedCallbacks = []//存储失败的回调
    function resolve(value) {
      if (self.status == 'pending') {
        self.status = 'resolved'
        self.value = value
        self.onResolvedCallbacks.forEach(fn => fn());
      }
    }
    function reject(error) {
      if (self.status == 'pending') {
        self.status = 'rejected'
        self.reason = error
        self.onRejectedCallbacks.forEach(fn => fn())
      }
    }
    //捕获到异常就直接失败了...
    try {
      executor(resolve, reject)
    } catch (error) {
      reject(error)
    }

  }
  Promise.prototype.then = function (infulfilled, inrejected) {
    let self = this
    if (this.status == 'resolved') {
      infulfilled(this.value)
    }
    if (this.status == 'rejected') {
      inrejected(this.reason)
    }
    if (this.status == 'pending') {
      this.onResolvedCallbacks.push(function () {
        infulfilled(self.value)
      })
      this.onRejectedCallbacks.push(function () {
        inrejected(self.reason)
      })
    }
  }
  let p = new Promise(function (resolve, reject) {
    throw new Error('错误')
  })
  p.then(function (data) {
    console.log(data, 'resolve')
  }, function (error) {
    console.log(error, 'reject111')
  })

现在已经可以成功捕获异常了

---

现在手写的promise离原生的promise又更像了一点，但是原生最大的特点~链式调用,我们还没有实现，

分析下~链式调用的实现方法

为了保证链式调用，不管是成功/失败/等待状态，都要返回一个新的Promise才能继续调用then方法

所以声明一个promise2=新的Promise去 解析，当new Promise的时候会立即执行executor

  function Promise(executor) {
    let self = this
    this.status = 'pending' //当前状态
    this.value = undefined  //存储成功的值
    this.reason = undefined //存储失败的原因
    this.onResolvedCallbacks = []//存储成功的回调
    this.onRejectedCallbacks = []//存储失败的回调
    function resolve(value) {
      if (self.status == 'pending') {
        self.status = 'resolved'
        self.value = value
        self.onResolvedCallbacks.forEach(fn => fn());
      }
    }
    function reject(error) {
      if (self.status == 'pending') {
        self.status = 'rejected'
        self.reason = error
        self.onRejectedCallbacks.forEach(fn => fn())
      }
    }
    try {
      executor(resolve, reject)
    } catch (error) {
      reject(error)
    }
  }
  Promise.prototype.then = function (infulfilled, inrejected) {
    let self = this
    let promise2
    if (this.status == 'resolved') {
      promise2 = new Promise(function (resolve, reject) {
        infulfilled(self.value)
      })
    }
    if (this.status == 'rejected') {
      promise2 = new Promise(function (resolve, reject) {
        inrejected(self.reason)
      })
    }
    if (this.status == 'pending') {
      promise2 = new Promise(function (resolve, reject) {
        self.onResolvedCallbacks.push(function () {
          infulfilled(self.value)
        })
        self.onRejectedCallbacks.push(function () {
          inrejected(self.reason)
        })
      })
    }
    return promise2
  }

这段代码看起来很简单~嗯~~~就是返回一个新的promise嘛~

其次~原生promise规定在then中无论是成功的回调还是失败的回调，只要返回了结果就会进入下一个then的成功的回调，如果有异常就会进入下一个then的失败的回调.

先来看一下then在抛出异常后的处理

*** 先看下面一段代码

//原生的promise和现在手写的promise都能实现这个功能哦~
  let p = new Promise(function (resolve, reject) {
    resolve(1000)
    //reject(2000)
  })
  let p2 = p.then(function (data) {
    throw new Error('錯誤')
  }, function (error) {
    throw new Error('失败了')
  })
  p2.then(function (data) {
    console.log(data, 'resolve');
    }, function (error) {
    console.log(error, 'rejected');
  })

可以看到，无论是在promise实例中使用了 resolve()还是reject()只要，在then中抛出了异常，就会进入下一个then的失败的回调

一步步分解下这个捕获异常的执行流程，先上个图

捋一下图片里的思路

• 第一步

//先调用了resolve，所以现在的promise的status是resolved 成功态
 let p = new Promise(function (resolve, reject) {
    resolve(1000)
  })

• 第二步 调用then方法，then方法中 根据当前的状态 resolved进入第一个if条件中
• 2.1 新初始化了一个Promise实例
• 2.2 新的Promiese实例会立即执行 infulfilled被调用，但是现在infulfilled里抛出了异常，被新的promise try catch捕获到,然后reject方法被调用,新的promise状态 status被改成reject失败状态, reason等于被catch到的报错信息

let p2 = p.then(function (data) {
    throw new Error('錯誤')
  }, function (error) {
    throw new Error('失败了')
  })

• 第三步， 现在 p2就是那个新的promise,并且状态是reject reason是刚捕获到的报错信息,当它调用then方法时进入第二个if条件,因为当前状态是reject嘛，
• 3.1 新初始化一个Promise实例
• 3.2 Promise立即执行，inrejected方法被调用，即p2.then的第二个回调函数执行。。打印错误信息

 p2.then(
    function (data) {
      console.log(data, 'resolve');
    },
    function (error) {
      console.log(error, 'rejected');
    })

终于把异常处理分析完了。。。

现在来分析下成功，或者失败的返回值的情况,

原生的primse执行then方法,有时可能会返回一个结果，作为下一个promise的值value或失败的原因reason,这个结果可能是一个普通值也可能是一个promise

let p = new Promise(function (resolve, reject) {
    resolve(1000)
  })
  let p2 = p.then(function (data) {
    //返回一个普通值
    // return 'test'
    //返回一个promise
    return new Promise(function (resolve, reject) {
      //resolve('成功')
      reject('失败')
    })
  }, function (error) {
    throw new Error('failed')
  })
   p2.then(
    function (data) {
      console.log(data, 'resolveq');
    },
    function (error) {
      console.log(error, 'rejected ');
    })

为了实现这个效果，要完善一下手写的Promise的then方法,写一个函数resolvePromise统一处理then方法执行后返回的结果

  Promise.prototype.then = function (infulfilled, inrejected) {
    let self = this
    let promise2
    if (this.status == 'resolved') {
      promise2 = new Promise(function (resolve, reject) {
        //x可能是一个promise，也可能是个普通值
        let x = infulfilled(self.value)
        //这里的resolve和reject都是promise2的,x就是infulfilled的返回值 可能是一个promise,也可能是个普通值所以要统一处理
        resolvePromise(promise2, x, resolve, reject)
      })
    }
    if (this.status == 'rejected') {
      promise2 = new Promise(function (resolve, reject) {
        //x可能是一个promise，也可能是个普通值
        let x = inrejected(self.reason)
        //这里的resolve和reject都是promise2的,x就是infulfilled的返回值 可能是一个promise,也可能是个普通值所以要统一处理
        resolvePromise(promise2, x, resolve, reject)
      })
    }
    if (this.status == 'pending') {
      promise2 = new Promise(function (resolve, reject) {
        self.onResolvedCallbacks.push(function () {
          //x可能是一个promise，也可能是个普通值
          let x = infulfilled(self.value)
        //这里的resolve和reject都是promise2的,x就是infulfilled的返回值 可能是一个promise,也可能是个普通值所以要统一处理
          resolvePromise(promise2, x, resolve, reject)
        })
        self.onRejectedCallbacks.push(function () {
          //x可能是一个promise，也可能是个普通值
          let x = inrejected(self.reason)
        //这里的resolve和reject都是promise2的,x就是infulfilled的返回值 可能是一个promise,也可能是个普通值所以要统一处理
          resolvePromise(promise2, x, resolve, reject)
        })
      })
    }
    return promise2
  }

resolvePromise的内部实现

• 1.首先看一种情况， 在原生Promise中 then方法返回的结果可能是他本身，这种情况永远不会成功或者失败（循环引用）,这时会抛出一个类型错误的异常

  

  所以在 resolvePromise内部要判断 返回的结果和Promise是不是同一个
• 2.判断 x是不是一个promise,如果是promise,如果x是对象，并且x的then方法是函数，那它就是promise
• 3 如果x不是promise 那应该是普通值 直接resolve
• 4.如果x是一个promise,那就看下他有没有then方法

function resolvePromise(p2, x, resolve, reject) {
    if (p2 === x && x != undefined) {
      reject(new TypeError('类型错误'))
    }
    //可能是promise,看下对象中是否有then方法，如果有~那就是个promise
    if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
        try {//为了防止出现 {then:11}这种情况,需要判断then是不是一个函数
        let then = x.then
        if (typeof then === 'function') {
          then.call(x, function (y) {
            //y 可能还是一个promise,那就再去解析，知道返回一个普通值为止
            resolvePromise(p2, y, resolve, reject)
          }, function (err) {
            reject(err)
          })
        } else {//如果then不是function 那可能是对象或常量
          resolve(x)
        }
      } catch (e) {
        reject(e)
      }
    } else {//说明是一个普通值 
      resolve(x)
    }
}

再完善一下..我们的代码应该可以在then中什么都不传,实现值得穿透

let p = new Promise(function (resolve, reject) {
   resolve(1000)
 })
 p.then().then().then(function (data) {
   console.log(data, 'resolve');
 }, function (error) {
   console.log(error, 'reject');
})

所以在then方法中需要对接收的参数infulfilled, inrejected进行容错 处理, 对于infulfilled 有就用原参数，没有就给个默认的函数 对于inrejected 没有就抛出异常

Promise.prototype.then = function (infulfilled, inrejected) {
   let self = this
   let promise2
   //如果infulfilled不是function就给个默认函数，返回val
   infulfilled = typeof infulfilled === 'function' ? infulfilled : function (val) {
     return val
   }
   //如果inrejected不是函数就抛出异常
   inrejected = typeof inrejected === 'function' ? inrejected : function (err) {
     throw err
   }
   if (this.status == 'resolved') {
     promise2 = new Promise(function (resolve, reject) {
       //x可能是一个promise，也可能是个普通值
       let x = infulfilled(self.value)
       resolvePromise(promise2, x, resolve, reject)
     })
   }
   if (this.status == 'rejected') {
     promise2 = new Promise(function (resolve, reject) {
       //x可能是一个promise，也可能是个普通值
       let x = inrejected(self.reason)
       resolvePromise(promise2, x, resolve, reject)
     })
   }
   if (this.status == 'pending') {
     promise2 = new Promise(function (resolve, reject) {
       self.onResolvedCallbacks.push(function () {
         //x可能是一个promise，也可能是个普通值
         let x = infulfilled(self.value)
         resolvePromise(promise2, x, resolve, reject)
       })
       self.onRejectedCallbacks.push(function () {
         //x可能是一个promise，也可能是个普通值
         let x = inrejected(self.reason)
         resolvePromise(promise2, x, resolve, reject)
       })
     })
   }
   return promise2
 }

最后~promise规范中要求所有的infulfilled, inrejected都要异步执行，所以这里给所有的infulfilled, inrejected加上setTimeout,下面是完整代码:

  function Promise(executor) {
   let self = this
   this.status = 'pending' //当前状态
   this.value = undefined  //存储成功的值
   this.reason = undefined //存储失败的原因
   this.onResolvedCallbacks = []//存储成功的回调
   this.onRejectedCallbacks = []//存储失败的回调
   function resolve(value) {
     if (self.status == 'pending') {
       self.status = 'resolved'
       self.value = value
       self.onResolvedCallbacks.forEach(fn => fn());
     }
   }
   function reject(error) {
     if (self.status == 'pending') {
       self.status = 'rejected'
       self.reason = error
       self.onRejectedCallbacks.forEach(fn => fn())
     }
   }
   try {
     executor(resolve, reject)
   } catch (error) {
     reject(error)
   }
 }
 Promise.prototype.then = function (infulfilled, inrejected) {
   let self = this
   let promise2
   infulfilled = typeof infulfilled === 'function' ? infulfilled : function (val) {
     return val
   }
   inrejected = typeof inrejected === 'function' ? inrejected : function (err) {
     throw err
   }
   if (this.status == 'resolved') {
     promise2 = new Promise(function (resolve, reject) {
       //x可能是一个promise，也可能是个普通值
       setTimeout(function () {
         try {
           let x = infulfilled(self.value)
           resolvePromise(promise2, x, resolve, reject)
         } catch (err) {
           reject(err)
         }
       });

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

     promise2 = new Promise(function (resolve, reject) {
       //x可能是一个promise，也可能是个普通值
       setTimeout(function () {
         try {
           let x = inrejected(self.reason)
           resolvePromise(promise2, x, resolve, reject)
         } catch (err) {
           reject(err)
         }
       });
     })
   }
   if (this.status == 'pending') {
     promise2 = new Promise(function (resolve, reject) {
       self.onResolvedCallbacks.push(function () {
         //x可能是一个promise，也可能是个普通值
         setTimeout(function () {
           try {
             let x = infulfilled(self.value)
             resolvePromise(promise2, x, resolve, reject)
           } catch (err) {
             reject(err)
           }
         });
       })
       self.onRejectedCallbacks.push(function () {
         //x可能是一个promise，也可能是个普通值
         setTimeout(function () {
           try {
             let x = inrejected(self.reason)
             resolvePromise(promise2, x, resolve, reject)
           } catch (err) {
             reject(err)
           }
         });
       })
     })
   }
   return promise2
 }
 function resolvePromise(p2, x, resolve, reject) {
   if (p2 === x && x != undefined) {
     reject(new TypeError('类型错误'))
   }
   //可能是promise,看下对象中是否有then方法，如果有~那就是个promise
   if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
     try {//为了防止出现 {then:11}这种情况,需要判断then是不是一个函数
       let then = x.then
       if (typeof then === 'function') {
         then.call(x, function (y) {
           //y 可能还是一个promise,那就再去解析，知道返回一个普通值为止
           resolvePromise(p2, y, resolve, reject)
         }, function (err) {
           reject(err)
         })
       } else {//如果then不是function 那可能是对象或常量
         resolve(x)
       }
     } catch (e) {
       reject(e)
     }
   } else {//说明是一个普通值 
     resolve(x)
   }
 }

ok~promise写完了。。欢迎大家提出建议。。