关于javascript:手写-promise

一、 Promise 的了解

• Promise 是 JS 中进行异步编程的新解决方案
• promise 对象用来封装一个异步操作并能够获取其胜利/失败的后果值
• promise 有 3 种状态，pending、resolved、rejected
• promise 的状态扭转(只有 2 种, 只能扭转一次)，pending 变为 resolved， pending 变为 rejected

二、Promise 构造函数

/* 
  Promise构造函数
  */
const PENDING = 'pending' // 初始未确定的状态
const RESOLVED = 'resolved' // 胜利的状态
const REJECTED = 'rejected' // 失败的状态
function Promise(excutor) {
  const self = this // Promise的实例对象
  self.status = PENDING // 状态属性, 初始值为pending, 代表初始未确定的状态
  self.data = undefined // 用来存储后果数据的属性, 初始值为undefined
  self.callbacks = [] // {onResolved(){}, onRejected(){}}

  /* 
    将promise的状态改为胜利, 指定胜利的value
    */
  function resolve(value) {
    // 如果以后不是pending, 间接完结
    if (self.status !== PENDING) return

    self.status = RESOLVED // 将状态改为胜利
    self.data = value // 保留胜利的value

    // 异步调用所有缓存的待执行胜利的回调函数
    if (self.callbacks.length > 0) {
      // 启动一个延迟时间为0的定时器, 在定时器的回调中执行所有胜利的回调
      setTimeout(() => {
        self.callbacks.forEach((cbsObj) => {
          cbsObj.onResolved(value)
        })
      })
    }
  }

  /* 
    将promise的状态改为失败, 指定失败的reason
    */
  function reject(reason) {
    // 如果以后不是pending, 间接完结
    if (self.status !== PENDING) return

    self.status = REJECTED // 将状态改为失败
    self.data = reason // 保留reason数据

    // 异步调用所有缓存的待执行失败的回调函数
    if (self.callbacks.length > 0) {
      // 启动一个延迟时间为0的定时器, 在定时器的回调中执行所有失败的回调
      setTimeout(() => {
        self.callbacks.forEach((cbsObj) => {
          cbsObj.onRejected(reason)
        })
      })
    }
  }

  // 调用excutor来启动异步工作
  try {
    excutor(resolve, reject)
  } catch (error) {
    // 执行器执行出错, 以后promise变为失败
    reject(error)
  }
}

三、Promise.prototype.then 办法

/* 
  用来指定胜利/失败回调函数的办法
      1). 如果以后promise是resolved, 异步执行胜利的回调函数onResolved
      2). 如果以后promise是rejected, 异步执行胜利的回调函数onRejected
      3). 如果以后promise是pending, 保留回调函数
  返回一个新的promise对象
      它的后果状态由onResolved或者onRejected执行的后果决定
      2.1). 抛出error ==> 变为rejected, 后果值为error
      2.2). 返回值不是promise   ==> 变为resolved, 后果值为返回值
      2.3). 返回值是promise    ===> 由这个promise的决定新的promise的后果(胜利/失败)
  */
Promise.prototype.then = function (onResolved, onRejected) {
  const self = this

  onResolved = typeof onResolved === 'function' ? onResolved : (value) => value // 将value向下传递
  onRejected =
    typeof onRejected === 'function'
      ? onRejected
      : (reason) => {
          throw reason
        } // 将reason向下传递

  return new Promise((resolve, reject) => {
    // 什么时候扭转它的状态
    /* 
      1. 调用指定的回调函数
      2. 依据回调执行后果来更新返回promise的状态
    */
    function handle(callback) {
      try {
        const result = callback(self.data)
        if (!(result instanceof Promise)) {
          //  2.2). 返回值不是promise   ==> 变为resolved, 后果值为返回值
          resolve(result)
        } else {
          // 2.3). 返回值是promise    ===> 由这个promise的决定新的promise的后果(胜利/失败)
          result.then(
            (value) => resolve(value),
            (reason) => reject(reason)
          )
        }
      } catch (error) {
        // 2.1). 抛出error ==> 变为rejected, 后果值为error
        reject(error)
      }
    }

    if (self.status === RESOLVED) {
      setTimeout(() => {
        handle(onResolved)
      })
    } else if (self.status === REJECTED) {
      setTimeout(() => {
        handle(onRejected)
      })
    } else {
      // PENDING
      self.callbacks.push({
        onResolved(value) {
          handle(onResolved)
        },
        onRejected(reason) {
          handle(onRejected)
        },
      })
    }
  })
}

四、Promise.prototype.catch 办法

/* 
 用来指定失败回调函数的办法
 能够应用then办法来简化catch办法
*/
Promise.prototype.catch = function (onRejected) {
  return this.then(undefined, onRejected)
}

五、Promise.resolve 办法

/* 
  用来返回一个指定vlaue的胜利的promise
  value可能是一个个别的值, 也可能是promise对象
  */
Promise.resolve = function (value) {
  return new Promise((resolve, reject) => {
    // 如果value是一个promise, 最终返回的promise的后果由value决定
    if (value instanceof Promise) {
      value.then(resolve, reject)
    } else {
      // value不是promise, 返回的是胜利的promise, 胜利的值就是value
      resolve(value)
    }
  })
}

六、Promise.reject 办法

/* 
  用来返回一个指定reason的失败的promise
  */
Promise.reject = function (reason) {
  return new Promise((resolve, reject) => {
    reject(reason)
  })
}

七、Promise.all 办法

/* 
  返回一个promise, 只有当数组中所有promise都胜利才胜利, 否则失败
  */
Promise.all = function (promises) {
  return new Promise((resolve, reject) => {
    let resolvedCount = 0 // 曾经胜利的数量
    const values = new Array(promises.length) // 用来保留胜利promise的value值
    // 遍历所有promise, 取其对应的后果
    promises.forEach((p, index) => {
      p.then(
        (value) => {
          resolvedCount++
          values[index] = value
          if (resolvedCount === promises.length) {
            // 都胜利了，调用resolve把所有的后果带过来
            resolve(values)
          }
        },
        (reason) => reject(reason) // 失败了间接，调用reject
      )
    })
  })
}

八、 Promise.race 办法

/* 
  返回一个promise, 由第一个实现promise决定
  */
Promise.race = function (promises) {
  return new Promise((resolve, reject) => {
    // 遍历所有promise, 取其对应的后果
    promises.forEach((p) => {
      // 返回的promise由第一个实现p来决定其后果
      p.then(resolve, reject)
    })
  })
}