手写Promise

Promise的特点：

1. Promise 是一个构造函数，在创建实例时会立即执行；
2. Promise 只有三个状态。fulfilled 成功，rejected 失败，pending 等待；
3. Promise 的状态改变，只有两种可能：pending -> fulfilled， pending -> rejected 一旦状态确定就不可更改；
4. resolve，reject函数用来更改状态。resolve ：fulfilled，reject ：rejected；
5. then 方法内部：判断状态，如果 status === fulfilled 调用成功回调，如果 status === rejected 调用失败回调，是被定义在原型对象中的；
6. then 成功回调有一个参数，表示成功后的值，then 失败回调有一个参数，表示失败的原因；
7. 同一个 promise 对象下的 then 方法是可以被多次调用的；
8. then 方法可以被链式调用，后面的 then 方法的回调函数拿到的值是上一个 then 方法的回调函数的返回值；
9. promise 对象的返回值不能是其本身；
10. all、race、resolve、finally、catch方法

部分 Promise 原理的实现：

const PENDING = "pending"   // 等待
const FULFILLED = "fulfilled"  // 成功
const REJECTED = "rejected"  // 失败

class MyPromise {
  constructor(executor) {
    try {
      executor(this.resolve, this.reject)
    } catch (e) {
      this.reject(e)
    }
  }
  // promise 状态
  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()()
  }
  // new Promise().then()  返回 promise 对象
  then(successCallback, failCallback) {
    successCallback = successCallback ? successCallback : value => value;
    failCallback = failCallback ? failCallback : reason => { throw reason; }
    let promise2 = new MyPromise((resolve, reject) => {
      if (this.status === FULFILLED) {
        // 这里的 setTimeout 的目的是为了拿到promise2
        setTimeout(() => {
          try {
            let x = successCallback(this.value)
            resolvePromise(promise2, x, resolve, reject)
          } catch (e) {
            reject(e)
          }
        }, 0)
      } else if (this.status === REJECTED) {
        // 这里的 setTimeout 的目的是为了拿到promise2
        setTimeout(() => {
          try {
            let x = failCallback(this.reason)
            resolvePromise(promise2, x, resolve, reject)
          } catch (e) {
            reject(e)
          }
        }, 0)
      } else {
        // pending      
        // 保存成功回调
        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;
  }
  // new Promise().catch() 返回promise对象
  catch(failCallback) {
    return this.then(undefined, failCallback)
  }
  // new Promise().finally()
  // 1.无论当前 promise 对象状态是成功还是失败，finally()都会被调用一次
  // 2.finally()后面可以链式调用then（）---> finally()返回一个 promise 对象
  finally(callback) {
    // then 方法可以拿到当前的状态
    return this.then(value => {
      return MyPromise.resolve(callback()).then(() => {
        return value
      })
    }, reason => {
      return MyPromise.resolve(callback()).then(() => {
        throw reason
      })
    })
  }
  // Promise.resolve(value)
  // resolve 返回的是一个promise对象
  static resolve(value) {
    if (value instanceof MyPromise) return value;
    return new MyPromise(resolve => resolve(value))
  }
  // Promise.all([])
  // 当 array 中的所有元素都执行成功，才返回成功 resolve
  // 当 array 中的一个元素执行失败，则返回失败 reject 
  static all(array) {
    let result = []
    let index = 0
    return new MyPromise((resolve, reject) => {
      const addData = (key, value) => {
        result[key] = value;
        index++;
        if (index === array.length) {
          resolve(result)
        }
      }
      for (let i = 0; i < array.length; i++) {
        let current = array[i]
        if (current instanceof MyPromise) {
          // promise 对象
          current.then(value => addData(i, value), reason => reject(reason))
        } else {
          // 普通值
          addData(i, current)
        }
      }
    })
  }
  // Promise.race([]) 
  // 返回 promise 对象，只要有一个实例率先改变状态，新的MyPromise的状态就跟着改变
  static race(array) {
    return new MyPromise((resolve, reject) => {
      for (let item of array) {
        if (item instanceof MyPromise) {
          // promise 对象
          item.then(value => resolve(value), reason => reject(reason))
        } else {
          // 普通值
          resolve(item)
        }
      }
    })
  }
}

function resolvePromise(promise, x, resolve, reject) {
  // promise对象的返回值不能是其本身
  if (promise === x) {
    return reject(new TypeError("Chaining cycle detected for promise #<Promise>"))
  }
  // 判断x是普通值还是Promise对象
  // 普通值，则直接调用resolve
  // promise对象，查看promise对象返回的结果，再根据其决定调用resolve还是reject
  if (x instanceof MyPromise) {
    // promise对象
    // x.then(value => resolve(value), reason => reject(reason))
    x.then(resolve, reject)
  } else {
    // 普通值
    resolve(x)
  }
}

module.exports = MyPromise;