Skip to main content

Promise 源码深度剖析

一、Promise 核心逻辑实现​

使用：

const MyPromise = require('./myPromise')

let promise = new MyPromise((resolve, reject) => {
  resolve('success')
  reject('err')
})

promise.then(value => {
  console.log('resolve', value)
}, reason => {
  console.log('reject', reason)
})

源码 myPromise.js：

// 定义成常量是为了复用且代码有提示
const PENDING = 'pending' // 等待
const FULFILLED = 'fulfilled' // 成功
const REJECTED = 'rejected' // 失败

// 定义一个构造函数
class MyPromise {
  constructor(exector) {
    // exector 是一个执行器，进入会立即执行，并传入 resolve 和 reject 方法
    exector(this.resolve, this.reject)
  }

  // 实例对象的一个属性，初始为等待
  status = PENDING
  // 成功之后的值
  value = undefined
  // 失败之后的原因
  reason = undefined

  // resolve 和 reject 为什么要用箭头函数？
  // 如果直接调用的话，普通函数 this 指向的是 window 或 undefined
  // 用箭头函数就可以让 this 指向当前实例对象
  resolve = value => {
    // 判断状态是不是等待，阻止程序向下执行
    if (this.status !== PENDING) return
    // 将状态改成成功
    this.status = FULFILLED
    // 保存成功之后的值
    this.value = value
  }

  reject = reason => {
    if (this.status !== PENDING) return
    // 将状态改为失败
    this.status = REJECTED
    // 保存失败之后的原因
    this.reason = reason
  }

  then(successCallback, failCallback) {
    //判断状态
    if (this.status === FULFILLED) {
      // 调用成功回调，并且把值返回
      successCallback(this.value)
    } else if (this.status === REJECTED) {
      // 调用失败回调，并且把原因返回
      failCallback(this.reason)
    }
  }
}

module.exports = MyPromise

二、在 Promise 类中加入异步逻辑​

使用：

const MyPromise = require('./myPromise')

let promise = new MyPromise((resolve, reject) => {
  // 主线程代码立即执行，setTimeout 是异步代码，then 会马上执行，
  // 这个时候判断 promise 状态，状态是 pending，然而之前并没有判断等待这个状态
  setTimeout(() => {
    resolve('success')
  }, 2000);
})

promise.then(value => {
  console.log('resolve', value)
}, reason => {
  console.log('reject', reason)
})

源码 myPromise.js：

const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'

class MyPromise {
  constructor(exector) {
    exector(this.resolve, this.reject)
  }

  status = PENDING
  value = undefined
  reason = undefined
  // 定义一个成功回调参数
  successCallback = undefined
  // 定义一个失败回调参数
  failCallback = undefined

  resolve = value => {
    if (this.status !== PENDING) return
    this.status = FULFILLED
    this.value = value
    // 判断成功回调是否存在，如果存在就调用
    this.successCallback && this.successCallback(this.value)
  }

  reject = reason => {
    if (this.status !== PENDING) return
    this.status = REJECTED
    this.reason = reason
    // 判断失败回调是否存在，如果存在就调用
    this.failCallback && this.failCallback(this.reason)
  }

  then(successCallback, failCallback) {
    if (this.status === FULFILLED) {
      successCallback(this.value)
    } else if (this.status === REJECTED) {
      failCallback(this.reason)
    } else {
      // 等待
      // 因为并不知道状态，所以将成功回调和失败回调存储起来
      // 等到执行成功失败函数的时候再传递
      this.successCallback = successCallback
      this.failCallback = failCallback
    }
  }
}

module.exports = MyPromise

三、实现 then 方法多次调用添加多个处理函数​

promise的then方法是可以被多次调用的。

这里如果有三个then的调用，

  • 如果是同步回调，那么直接返回当前的值就行；
  • 如果是异步回调，那么保存的成功失败的回调，需要用不同的值保存，因为都互不相同。

使用：

const MyPromise = require('./myPromise')

let promise = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')
  }, 2000);
})

promise.then(value => {
  console.log(1)
  console.log('resolve', value)
})

promise.then(value => {
  console.log(2)
  console.log('resolve', value)
})

promise.then(value => {
  console.log(3)
  console.log('resolve', value)
})

源码 myPromise.js：

const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'

class MyPromise {
  constructor(exector) {
    exector(this.resolve, this.reject)
  }


  status = PENDING
  value = undefined
  reason = undefined
  // 定义一个成功回调参数，初始化一个空数组
  successCallback = []
  // 定义一个失败回调参数，初始化一个空数组
  failCallback = []

  resolve = value => {
    if (this.status !== PENDING) return
    this.status = FULFILLED
    this.value = value
    // 判断成功回调是否存在，如果存在就调用
    // 循环回调数组. 把数组前面的方法弹出来并且直接调用
    // shift 方法是在数组中删除值，每执行一个就删除一个，最终变为0
    while (this.successCallback.length) this.successCallback.shift()(this.value)
  }

  reject = reason => {
    if (this.status !== PENDING) return
    this.status = REJECTED
    this.reason = reason
    // 判断失败回调是否存在，如果存在就调用
    // 循环回调数组. 把数组前面的方法弹出来并且直接调用
    while (this.failCallback.length) this.failCallback.shift()(this.reason)
  }

  then(successCallback, failCallback) {
    if (this.status === FULFILLED) {
      successCallback(this.value)
    } else if (this.status === REJECTED) {
      failCallback(this.reason)
    } else {
      // 等待
      // 将成功回调和失败回调都保存在数组中
      this.successCallback.push(successCallback)
      this.failCallback.push(failCallback)
    }
  }
}

module.exports = MyPromise

四、实现 then 方法的链式调用​

  • then 方法要链式调用那么就需要返回一个 promise 对象。
  • then 方法的 return 返回值作为下一个 then 方法的参数。
  • then 方法还一个 return 一个 promise 对象，那么如果是一个 promise 对象，那么就需要判断它的状态。

使用：

const MyPromise = require('./myPromise')

let promise = new MyPromise((resolve, reject) => {
  // 目前这里只处理同步的问题
  resolve('success')
})

function other() {
  return new MyPromise((resolve, reject) => {
    resolve('other')
  })
}
promise.then(value => {
  console.log(1)
  console.log('resolve', value)
  return other()
}).then(value => {
  console.log(2)
  console.log('resolve', value)
})

源码 myPromise.js：

const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'

class MyPromise {
  constructor(exector) {
    exector(this.resolve, this.reject)
  }

  status = PENDING
  value = undefined
  reason = undefined
  successCallback = []
  failCallback = []

  resolve = value => {
    if (this.status !== PENDING) return
    this.status = FULFILLED
    this.value = value
    while (this.successCallback.length) this.successCallback.shift()(this.value)
  }

  reject = reason => {
    if (this.status !== PENDING) return
    this.status = REJECTED
    this.reason = reason
    while (this.failCallback.length) this.failCallback.shift()(this.reason)
  }

  then(successCallback, failCallback) {
    // then 方法返回第一个 promise 对象
    let promise2 = new Promise((resolve, reject) => {
      if (this.status === FULFILLED) {
        // x 是上一个 promise 回调函数的 return 返回值
        // 判断 x 的值时普通值还是 promise 对象
        // 如果是普通纸 直接调用 resolve
        // 如果是 promise 对象 查看 promise 对象返回的结果
        // 再根据 promise 对象返回的结果 决定调用 resolve 还是 reject
        let x = successCallback(this.value)
        resolvePromise(x, resolve, reject)
      } else if (this.status === REJECTED) {
        failCallback(this.reason)
      } else {
        this.successCallback.push(successCallback)
        this.failCallback.push(failCallback)
      }
    });
    return promise2
  }
}

function resolvePromise(x, resolve, reject) {
  // 判断 x 是不是其实例对象
  if (x instanceof MyPromise) {
    // promise 对象
    // x.then(value => resolve(value), reason => reject(reason))
    // 简化之后
    x.then(resolve, reject)
  } else {
    // 普通值
    resolve(x)
  }
}

module.exports = MyPromise

五、then方法链式调用识别 Promise 对象自返回​

如果then方法返回的是自己的promise对象，则会发生promise的嵌套，这个时候程序会报错：

var promise = new Promise((resolve, reject) => {
  resolve(100)
})

var p1 = promise.then(value => {
  console.log(value)
  return p1
})

// 100
// Uncaught (in promise) TypeError: Chaining cycle detected for promise #<Promise>

所以为了避免这种情况，我们需要改造一下 then 方法：

const MyPromise = require('./myPromise')

let promise = new MyPromise((resolve, reject) => {
  resolve('success')
})

// 这个时候将 promise 定义一个 p1，然后返回的时候返回 p1 这个 promise
let p1 = promise.then(value => {
  console.log(1)
  console.log('resolve', value)
  return p1
})

// 运行的时候会走 reject
p1.then(value => {
  console.log(2)
  console.log('resolve', value)
}, reason => {
  console.log(3)
  console.log(reason.message)
})

// 1
// resolve success
// 3
// Chaining cycle detected for promise #<Promise>

源码：

const { rejects } = require("assert")

const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
class MyPromise {
  constructor(exector) {
    exector(this.resolve, this.reject)
  }


  status = PENDING
  value = undefined
  reason = undefined
  successCallback = []
  failCallback = []

  resolve = value => {
    if (this.status !== PENDING) return
    this.status = FULFILLED
    this.value = value
    while (this.successCallback.length) this.successCallback.shift()(this.value)
  }

  reject = reason => {
    if (this.status !== PENDING) return
    this.status = REJECTED
    this.reason = reason
    while (this.failCallback.length) this.failCallback.shift()(this.reason)
  }

  then(successCallback, failCallback) {
    let promise2 = new Promise((resolve, reject) => {
      if (this.status === FULFILLED) {
        // 因为 new Promise 需要执行完成之后才有 promise2，同步代码中没有 pormise2
        // 所以这部分代码需要异步执行
        setTimeout(() => {
          let x = successCallback(this.value)
          // 需要判断 then 之后 return 的 promise 对象和原来的是不是一样的
          // 判断 x 和 promise2 是否相等，所以给 resolvePromise 中传递 promise2 过去
          resolvePromise(promise2, x, resolve, reject)
        }, 0);
      } else if (this.status === REJECTED) {
        failCallback(this.reason)
      } else {
        this.successCallback.push(successCallback)
        this.failCallback.push(failCallback)
      }
    });
    return promise2
  }
}

function resolvePromise(promise2, x, resolve, reject) {
  // 如果相等了，说明 return 的是自己，抛出类型错误并返回
  if (promise2 === x) {
    return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
  }
  if (x instanceof MyPromise) {
    x.then(resolve, reject)
  } else {
    resolve(x)
  }
}

module.exports = MyPromise

六、捕获错误及 then 链式调用其他状态代码补充​

目前我们在 Promise 类中没有进行任何处理，所以我们需要捕获和处理错误。

1、捕获执行器的错误​

捕获执行器中的代码，如果执行器中有代码错误，那么 promise 的状态要弄成错误状态：

const MyPromise = require('./myPromise')

let promise = new MyPromise((resolve, reject) => {
  // resolve('success')
  throw new Error('执行器错误')
})

promise.then(value => {
  console.log(1)
  console.log('resolve', value)
}, reason => {
  console.log(2)
  console.log(reason.message)
})

// 2
// 执行器错误

源码：

constructor(exector) {
  // 捕获错误，如果有错误就执行 reject
  try {
    exector(this.resolve, this.reject)
  } catch (e) {
    this.reject(e)
  }
}

2、then执行的时候报错捕获​

使用：

const MyPromise = require('./myPromise')

let promise = new MyPromise((resolve, reject) => {
  resolve('success')
  // throw new Error('执行器错误')
})

// 第一个 then 方法中的错误要在第二个 then 方法中捕获到
promise.then(value => {
  console.log(1)
  console.log('resolve', value)
  throw new Error('then error')
}, reason => {
  console.log(2)
  console.log(reason.message)
}).then(value => {
  console.log(3)
  console.log(value);
}, reason => {
  console.log(4)
  console.log(reason.message)
})

// 1
// resolve success
// 4
// then error

源码：

then(successCallback, failCallback) {
  let promise2 = new Promise((resolve, reject) => {
    if (this.status === FULFILLED) {
      setTimeout(() => {
        // 如果回调中报错的话就执行 reject
        try {
          let x = successCallback(this.value)
          resolvePromise(promise2, x, resolve, reject)
        } catch (e) {
          reject(e)
        }
      }, 0);
    } else if (this.status === REJECTED) {
      failCallback(this.reason)
    } else {
      this.successCallback.push(successCallback)
      this.failCallback.push(failCallback)
    }
  });
  return promise2
}

3、错误之后的链式调用​

使用：

const MyPromise = require('./myPromise')

let promise = new MyPromise((resolve, reject) => {
  // resolve('success')
  throw new Error('执行器错误')
})

// 第一个 then 方法中的错误要在第二个 then 方法中捕获到
promise.then(value => {
  console.log(1)
  console.log('resolve', value)
}, reason => {
  console.log(2)
  console.log(reason.message)
  return 100
}).then(value => {
  console.log(3)
  console.log(value);
}, reason => {
  console.log(4)
  console.log(reason.message)
})

// 2
// 执行器错误
// 3
// 100

源码：

then(successCallback, failCallback) {
  let promise2 = new Promise((resolve, reject) => {
    if (this.status === FULFILLED) {
      setTimeout(() => {
        try {
          let x = successCallback(this.value)
          resolvePromise(promise2, x, resolve, reject)
        } catch (e) {
          reject(e)
        }
      }, 0)
      // 在状态是 reject 的时候对返回的 promise 进行处理
    } else if (this.status === REJECTED) {
      setTimeout(() => {
        // 如果回调中报错的话就执行 reject
        try {
          let x = failCallback(this.reason)
          resolvePromise(promise2, x, resolve, reject)
        } catch (e) {
          reject(e)
        }
      }, 0)
    } else {
      this.successCallback.push(successCallback)
      this.failCallback.push(failCallback)
    }
  });
  return promise2
}

4、异步状态下链式调用​

还是要处理一下如果 promise 里面有异步的时候，then 的链式调用的问题：

const MyPromise = require('./myPromise')

let promise = new MyPromise((resolve, reject) => {
  // 一个异步方法
  setTimeout(() => {
    resolve('succ')
  }, 2000)
})

promise.then(value => {
  console.log(1)
  console.log('resolve', value)
  return 'aaa'
}, reason => {
  console.log(2)
  console.log(reason.message)
  return 100
}).then(value => {
  console.log(3)
  console.log(value);
}, reason => {
  console.log(4)
  console.log(reason.message)
})

// 1
// resolve succ
// 3
// aaa

源码：

const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'

class MyPromise {
  constructor(exector) {
    // 捕获错误，如果有错误就执行 reject
    try {
      exector(this.resolve, this.reject)
    } catch (e) {
      this.reject(e)
    }
  }

  status = PENDING
  value = undefined
  reason = undefined
  successCallback = []
  failCallback = []

  resolve = value => {
    if (this.status !== PENDING) return
    this.status = FULFILLED
    this.value = value
    // 异步回调传值
    // 调用的时候不需要传值，因为下面 push 到里面的时候已经处理好了
    while (this.successCallback.length) this.successCallback.shift()()
  }

  reject = reason => {
    if (this.status !== PENDING) return
    this.status = REJECTED
    this.reason = reason
    // 异步回调传值
    // 调用的时候不需要传值，因为下面 push 到里面的时候已经处理好了
    while (this.failCallback.length) this.failCallback.shift()()
  }

  then(successCallback, failCallback) {
    let promise2 = new Promise((resolve, reject) => {
      if (this.status === FULFILLED) {
        setTimeout(() => {
          // 如果回调中报错的话就执行 reject
          try {
            let x = successCallback(this.value)
            resolvePromise(promise2, x, resolve, reject)
          } catch (e) {
            reject(e)
          }
        }, 0)
      } else if (this.status === REJECTED) {
        setTimeout(() => {
          // 如果回调中报错的话就执行 reject
          try {
            let x = failCallback(this.reason)
            resolvePromise(promise2, x, resolve, reject)
          } catch (e) {
            reject(e)
          }
        }, 0)
      } else {
        // 处理异步的成功错误情况
        this.successCallback.push(() => {
          setTimeout(() => {
            // 如果回调中报错的话就执行 reject
            try {
              let x = successCallback(this.value)
              resolvePromise(promise2, x, resolve, reject)
            } catch (e) {
              reject(e)
            }
          }, 0)
        })
        this.failCallback.push(() => {
          setTimeout(() => {
            // 如果回调中报错的话就执行 reject
            try {
              let x = failCallback(this.reason)
              resolvePromise(promise2, x, resolve, reject)
            } catch (e) {
              reject(e)
            }
          }, 0)
        })
      }
    });
    return promise2
  }
}

function resolvePromise(promise2, x, resolve, reject) {
  if (promise2 === x) {
    return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
  }
  if (x instanceof MyPromise) {
    x.then(resolve, reject)
  } else {
    resolve(x)
  }
}

module.exports = MyPromise

七、将then方法的参数变成可选参数​

then 方法的两个参数都是可选参数，可以不传参数。

下面的参数可以传递到最后进行返回：

var promise = new Promise((resolve, reject) => {
  resolve(100)
})

promise
  .then()
  .then()
  .then()
  .then(value => console.log(value))
// 在控制台最后一个 then 中输出了 100

// 相当于
promise
  .then(value => value)
  .then(value => value)
  .then(value => value)
  .then(value => console.log(value))

这里修改一下 then 方法：

then(successCallback, failCallback) {
  // 这里进行判断，如果有回调就选择回调，如果没有回调就传一个函数，把参数传递
  successCallback = successCallback ? successCallback : value => value
  // 错误函数也是进行赋值，把错误信息抛出
  failCallback = failCallback ? failCallback : reason => { throw reason }
  let promise2 = new Promise((resolve, reject) => {
      ...
  })
  ...
}

// 简化也可以这样写
then(successCallback = value => value, failCallback = reason => { throw reason }) {
  ···
}

resolve 之后：

const MyPromise = require('./myPromise')

let promise = new MyPromise((resolve, reject) => {
  resolve('succ')
})

promise.then().then().then(value => console.log(value))

// succ

reject 之后：

const MyPromise = require('./myPromise')

let promise = new MyPromise((resolve, reject) => {
  reject('err')
})

promise.then().then().then(value => console.log(value), reason => console.log(reason))

// err

八、promise.all 方法的实现​

promise.all 方法是解决异步并发问题的。

// 如果 p1 是两秒之后执行的，p2 是立即执行的，那么根据正常的是 p2 在 p1 的前面。
// 如果我们在 all 中指定了执行顺序，那么会根据我们传递的顺序进行执行。
function p1() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('p1')
    }, 2000)
  })
}

function p2() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('p2')
    }, 0)
  })
}

Promise.all(['a', 'b', p1(), p2(), 'c']).then(result => {
  console.log(result)
  // ["a", "b", "p1", "p2", "c"]
})

分析：

  • all 方法接收一个数组，数组中可以是普通值也可以是 promise 对象。
  • 数组中值得顺序一定是我们得到的结果的顺序。
  • promise 返回值也是一个 promise 对象，可以调用 then 方法。
  • 如果数组中所有值是成功的，那么 then 里面就是成功回调，如果有一个值是失败的，那么 then 里面就是失败的。
  • 使用 all 方法是用类直接调用，那么 all 一定是一个静态方法。

使用：

const MyPromise = require('./myPromise')

function p1() {
  return new MyPromise((resolve, reject) => {
    setTimeout(() => {
      resolve('p1')
    }, 2000)
  })
}

function p2() {
  return new MyPromise((resolve, reject) => {
    setTimeout(() => {
      resolve('p2')
    }, 0)
  })
}

Promise.all(['a', 'b', p1(), p2(), 'c']).then(result => {
  console.log(result)
  // ["a", "b", "p1", "p2", "c"]
})

源码：

static all(array) {
  // 结果数组
  let result = []
  // 计数器
  let index = 0
  return new Promise((resolve, reject) => {
    let addData = (key, value) => {
      result[key] = value
      index++
      // 如果计数器和数组长度相同，那说明所有的元素都执行完毕了，就可以输出了
      if (index === array.length) {
        resolve(result)
      }
    }
    // 对传递的数组进行遍历
    for (let i = 0; i < array.lengt; i++) {
      let current = array[i]
      if (current instanceof MyPromise) {
        // promise 对象就执行 then，如果是 resolve 就把值添加到数组中去，如果是错误就执行 reject 返回
        current.then(value => addData(i, value), reason => reject(reason))
      } else {
        // 普通值就加到对应的数组中去
        addData(i, array[i])
      }
    }
  })
}

九、Promise.resolve 方法的实现​

  • 如果参数就是一个 promise 对象，直接返回，如果是一个值，那么需要生成一个 promise 对象，把值进行返回。
  • 是 Promise 类的一个静态方法。

使用：

const MyPromise = require('./myPromise')

function p1() {
  return new MyPromise((resolve, reject) => {
    setTimeout(() => {
      resolve('p1')
    }, 2000)
  })
}

Promise.resolve(100).then(value => console.log(value))
Promise.resolve(p1()).then(value => console.log(value))
// 100
// 2s 之后输出 p1

源码：

static resolve(value) {
  // 如果是 promise 对象，就直接返回
  if (value instanceof MyPromise) return value
  // 如果是值就返回一个 promise 对象，并返回值
  return new MyPromise(resolve => resolve(value))
}

十、finally 方法的实现​

  • 无论当前最终状态是成功还是失败，finally 都会执行。
  • 我们可以在 finally 方法之后调用 then 方法拿到结果。
  • 这个函数是在原型对象上用的。

使用：

static resolve(value) {
  // 如果是 promise 对象，就直接返回
  if (value instanceof MyPromise) return value
  // 如果是值就返回一个 promise 对象，并返回值
  return new MyPromise(resolve => resolve(value))
}

const MyPromise = require('./myPromise')

function p1() {
  return new MyPromise((resolve, reject) => {
    setTimeout(() => {
      resolve('p1')
    }, 2000)
  })
}

function p2() {
  return new MyPromise((resolve, reject) => {
    reject('p2 reject')
  })
}

p2().finally(() => {
  console.log('finallyp2')
  return p1()
}).then(value => {
  console.log(value)
}, reason => {
  console.log(reason)
})

// finallyp2
// 两秒之后执行p2 reject

源码：

finally (callback) {
  // 如何拿到当前的 promise 的状态，使用 then 方法，而且不管怎样都返回 callback
  // 而且 then 方法就是返回一个 promise 对象，那么我们直接返回 then 方法调用之后的结果即可
  // 我们需要在回调之后拿到成功的回调，所以需要把 value 也 return
  // 失败的回调也抛出原因
  // 如果 callback 是一个异步的 promise 对象，我们还需要等待其执行完毕，所以需要用到静态方法 resolve
  return this.then(value => {
    // 把 callback 调用之后返回的 promise 传递过去，并且执行 promise，且在成功之后返回 value
    return MyPromise.resolve(callback()).then(() => value)
  }, reason => {
    // 失败之后调用的 then 方法，然后把失败的原因返回出去。
    return MyPromise.resolve(callback()).then(() => { throw reason })
  })
}

十一、catch 方法的实现​

  • catch 方法是为了捕获 promise 对象的所有错误回调的。
  • 直接调用 then 方法，然后成功的地方传递 undefined，错误的地方传递 reason。
  • catch 方法是作用在原型对象上的方法。

使用：

const MyPromise = require('./myPromise')

function p2() {
  return new MyPromise((resolve, reject) => {
    reject('p2 reject')
  })
}

p2()
  .then(value => {
    console.log(value)
  })
  .catch(reason => console.log(reason))

// p2 reject

源码：

catch (failCallback) {
  return this.then(undefined, failCallback)
}

十二、Promise 完整源码​

myPromise.js
const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'

class MyPromise {
  constructor(exector) {
    try {
      exector(this.resolve, this.reject)
    } catch (e) {
      this.reject(e)
    }
  }

  status = PENDING
  value = undefined
  reason = undefined
  successCallback = []
  failCallback = []

  resolve = value => {
    if (this.status !== PENDING) return
    this.status = FULFILLED
    this.value = value
    while (this.successCallback.length) this.successCallback.shift()()
  }

  reject = reason => {
    if (this.status !== PENDING) return
    this.status = REJECTED
    this.reason = reason
    while (this.failCallback.length) this.failCallback.shift()()
  }

  then(successCallback = value => value, failCallback = reason => { throw reason }) {
    let promise2 = new Promise((resolve, reject) => {
      if (this.status === FULFILLED) {
        setTimeout(() => {
          try {
            let x = successCallback(this.value)
            resolvePromise(promise2, x, resolve, reject)
          } catch (e) {
            reject(e)
          }
        }, 0)
      } else if (this.status === REJECTED) {
        setTimeout(() => {
          try {
            let x = failCallback(this.reason)
            resolvePromise(promise2, x, resolve, reject)
          } catch (e) {
            reject(e)
          }
        }, 0)
      } else {
        this.successCallback.push(() => {
          setTimeout(() => {
            try {
              let x = successCallback(this.value)
              resolvePromise(promise2, x, resolve, reject)
            } catch (e) {
              reject(e)
            }
          }, 0)
        })
        this.failCallback.push(() => {
          setTimeout(() => {
            try {
              let x = failCallback(this.reason)
              resolvePromise(promise2, x, resolve, reject)
            } catch (e) {
              reject(e)
            }
          }, 0)
        })
      }
    });
    return promise2
  }

  finally(callback) {
    // 如何拿到当前的 promise 的状态，使用 then 方法，而且不管怎样都返回 callback
    // 而且 then 方法就是返回一个 promise 对象，那么我们直接返回 then 方法调用之后的结果即可
    // 我们需要在回调之后拿到成功的回调，所以需要把 value 也 return
    // 失败的回调也抛出原因
    // 如果 callback 是一个异步的 promise 对象，我们还需要等待其执行完毕，所以需要用到静态方法 resolve
    return this.then(value => {
      // 把 callback 调用之后返回的 promise 传递过去，并且执行 promise，且在成功之后返回 value
      return MyPromise.resolve(callback()).then(() => value)
    }, reason => {
      // 失败之后调用的 then 方法，然后把失败的原因返回出去。
      return MyPromise.resolve(callback()).then(() => { throw reason })
    })
  }

  catch(failCallback) {
    return this.then(undefined, failCallback)
  }

  static all(array) {
    let result = []
    let index = 0
    return new Promise((resolve, reject) => {
      let addData = (key, value) => {
        result[key] = value
        index++
        if (index === array.length) {
          resolve(result)
        }
      }
      for (let i = 0; i < array.lengt; i++) {
        let current = array[i]
        if (current instanceof MyPromise) {
          current.then(value => addData(i, value), reason => reject(reason))
        } else {
          addData(i, array[i])
        }
      }
    })
  }

  static resolve(value) {
    if (value instanceof MyPromise) return value
    return new MyPromise(resolve => resolve(value))
  }
}

function resolvePromise(promise2, x, resolve, reject) {
  if (promise2 === x) {
    return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
  }
  if (x instanceof MyPromise) {
    x.then(resolve, reject)
  } else {
    resolve(x)
  }
}

module.exports = MyPromise

点击查看更多详情