乐趣区

关于javascript:手写-promise

jiezi

一、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)
    })
  })
}
退出移动版