JavaScript手写Promise

在前端异步方案中，Promise大放异彩，解决了回调地狱的难堪。今天我们就来手动撸一个promise。

首先分析，Promise有三种状态，pending（等待中）、fulfilled（已成功）、rejected（已失败），只有异步操作的结果可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。状态一旦改变就不会再变了，任何时候都可以得到这个结果。

Promise对象的状态改变只有两种可能：从pending 变为 fulfilled，或从pending 变为 rejected，只要这两种情况发生，状态就凝固了，不会再变，而是一直保持这个结果。

    const PENDING = 'pending'
    const RESOLVED = 'resolved'
    const REJECTED = 'rejected'

    function MyPromise(fn) {
      const that = this
      that.state = PENDING
      that.value = null
      that.resolvedCallbacks = []
      that.rejectedCallbacks = []

      try {
        fn(resolve, reject)
      } catch (e) {
        reject(e)
      }

      function resolve(value) {
        if (that.state === PENDING) {
          that.state = RESOLVED
          that.value = value
          that.resolvedCallbacks.map(cb => cb(that.value))
        }
      }

      function reject(value) {
        if (that.state === PENDING) {
          that.state = REJECTED
          that.value = value
          that.rejectedCallbacks.map(cb => cb(that.value))
        }
      }
    }

下面，我们再来实现一下 then 方法：

    MyPromise.prototype.then = function(onFulfilled, onRejected) {
      const that = this
      setTimeout(() => {
        onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : v => v
        onRejected = typeof onRejected === 'function' ? onRejected : r => {throw r}
        if (that.state === PENDING) {
          that.resolvedCallbacks.push(onFulfilled)
          that.rejectedCallbacks.push(onRejected)
        }
        if (that.state === RESOLVED) {
          onFulfilled(that.value)
        }
        if (that.state === REJECTED) {
          onRejected(that.value)
        }
      }, 0)
    }

那么，我们来实验一下：

    console.log(111);
    let p = new MyPromise((resolve, reject) => {
      console.log(222);
      resolve(263)
    })

    p.then(res => {console.log(res, 677)})
    console.log(3333);

控制台输出如下：

以上，就是手写版的promise，望各位大神批评指教！