Skip to content

Promise

  • Promise就是一个类,在执行这个类的时候,需要传递一个执行器,执行器就会立即执行
  • Promise中有三种状态,分别为成功(fulfilled)、失败(rejected)、等待(pending),pending -> fulfilled 或 pending -> rejected 一旦状态确定就不可更改
  • resolve和reject函数是用来更改状态的 resolve: fulfilled、reject: rejected
  • then方法内部做的事情就是判断状态,如果状态是成功,调用成功的回调函数,如果状态是失败,调用失败的回调函数,then方法是被定义在原型对象中的
  • then成功回调有一个参数,表示成功之后的值,then失败回调有一个参数,表示失败后的原因
  • 同一个promise对象下面的then方法是可以被调用多次的
  • then方法是可以被链式调用的,后边then方法的回调函数拿到值的是上一个then方法的回调函数的返回值
js
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
    // 判断成功回调是否存在,存在即调用
    // this.successCallback && this.successCallback(this.value) 一次调用时
    // 多次调用时
    while(this.successCallback.length) {
      this.successCallback.shift()()
    }
  }

  reject = (reason) => {
     //状态不是等待,阻止向下执行,状态一旦确定不可更改
    if(this.status !== PENDING) return
    // 状态更改为失败
    this.status = REJECTED
    // 保存失败后的原因
    this.reason = reason
    // 判断失败回调是否存在,存在即调用
    // this.failCallback && this.failCallback(this.reason) // 一次调用时
    while(this.failCallback.length) {
      this.failCallback.shift()()
    }
  }
  then(successCallback, failCallback) {
    // 解决then链式调用,没有参数情况
    successCallback = successCallback ? successCallback : value => value
    failCallback = failCallback ? failCallback : reason => { throw reason }
    // 链式调用需要返回一个promise
    let promise2 = new MyPromise((resolve, reject) => {
      // 状态判断
      if (this.status === FULFILLED) {
        // 修改代码为异步,只有异步的时候,才能拿到promise2得值作为参数使用
        setTimeout(() => {
          try {
            // 把成功后的值传回去, 记录成功后的返回值
            let x = successCallback(this.value)
            // 判断x是普通值还是promise对象
            // 如果是普通值 直接调用resolve
            // 如果是promise对象,查看promise对象返回的结果
            // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
            resolvePromise(promise2, x, resolve, reject)
          } catch(e) {
            // 捕获异常
            reject(e)
          }
        }, 0);
      } else if (this.status === REJECTED) {
        // 把失败后的原因传回去 
        // 修改代码为异步,只有异步的时候,才能拿到promise2得值作为参数使用
        setTimeout(() => {
          try {
            // 把成功后的值传回去, 记录成功后的返回值
            let x = failCallback(this.reason)
            // 判断x是普通值还是promise对象
            // 如果是普通值 直接调用resolve
            // 如果是promise对象,查看promise对象返回的结果
            // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
            resolvePromise(promise2, x, resolve, reject)
          } catch(e) {
            // 捕获异常
            reject(e)
          }
        }, 0);
      } else {
        // 等待
        // 把成功回调和失败回调存储起来
        this.successCallback.push(() => {
          setTimeout(() => {
            try {
              // 把成功后的值传回去, 记录成功后的返回值
              let x = successCallback(this.value)
              // 判断x是普通值还是promise对象
              // 如果是普通值 直接调用resolve
              // 如果是promise对象,查看promise对象返回的结果
              // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
              resolvePromise(promise2, x, resolve, reject)
            } catch(e) {
              // 捕获异常
              reject(e)
            }
          }, 0);
        })
        this.failCallback.push(() => {
          setTimeout(() => {
            try {
              // 把成功后的值传回去, 记录成功后的返回值
              let x = failCallback(this.reason)
              // 判断x是普通值还是promise对象
              // 如果是普通值 直接调用resolve
              // 如果是promise对象,查看promise对象返回的结果
              // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
              resolvePromise(promise2, x, resolve, reject)
            } catch(e) {
              // 捕获异常
              reject(e)
            }
          }, 0);
        })
      }
    })
    return promise2
  }
  finally(callback) {
    return this.then(value => {
      return MyPromise.resolve(callback()).then(() => value)
    }, reason => {
      return MyPromise.resolve(callback()).then(() => { throw reason })
    })
  }
  catch(failCallback) {
    return this.then(undefined, failCallback)
  }
  // 静态方法
  static all(array) {
    let result = []
    let index = 0
    return new MyPromise((resolve, reject) => {
      function 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, array[i])
        }
      }
      resolve(result)
    })
  }
  // 静态方法
  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) {
    // promise对象
    // x.then((value) => resolve(value), reason => reject(reason))
    // 简化
    x.then(resolve, reject)
  } else {
    // 普通值
    resolve(x)
  }
}

module.exports = MyPromise

Released under the MIT License.