37 -【经典面试】手写Promise

wucuiping commented 3 years ago

https://juejin.cn/post/6844903625769091079

Guyidingsanyu commented 3 years ago

// 简易版
// 首先创建三个常量表示状态
const PENDING = 'pending'
const RESOLVED = 'resolved'
const REJECTED = 'rejected'

function MyPromise(fn) {
  const that = this
  that.state = PENDING
  that.value = null
  // 用于保存 then 中的回调，因为当执行完Promise时状态可能还在等待中，这是需要把 then 中的回调保存用于状态改变时使用
  that.resolvedCallbacks = []
  that.rejectedCallbacks = []

  // 完善 resolve 和 reject 函数
  // 两个函数都得判断当前状态是否等待中，规范规定只有等待才能改变状态
  // 将当前状态更改为对应状态，并将传入的值赋给 value
  // 遍历回调函数并执行
  function resolve(value) {
    if (that.state === PENDING) {
      that.state = RESOLVED
      that.value = value
      that.resolvedCallbacks.map(cb => cb(that.value))
    }
  }

  function reject(value) {
    if (that.state === PENDING) {
      that.state = REJECTED
      that.value = value
      that.rejectedCallbacks.map(cb => cb(that.value))
    }
  }
  // 完善执行 fn 函数
  // 执行传入的参数并将之前两个函数当作参数传进去
  //! 可能执行函数过程会遇到错误，需要捕获并执行 reject 函数
  try {
    fn(resolve, reject)
  } catch (e) {
    reject(e)
  }
}
// then
MyPromise.prototype.then = function(onFulfilled, onRejected) {
  const that = this
  onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : v => v
  onRejected =
    typeof onRejected === 'function'
      ? onRejected
      : r => {
          throw r
        }
  if (that.state === PENDING) {
    that.resolvedCallbacks.push(onFulfilled)
    that.rejectedCallbacks.push(onRejected)
  }
  if (that.state === RESOLVED) {
    onFulfilled(that.value)
  }
  if (that.state === REJECTED) {
    onRejected(that.value)
  }
}

Guyidingsanyu commented 3 years ago

new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve(1)
  }, 3000)
}).then(value => {
  console.log(value)
})

minjs1cn / weekly-learning

37 -【经典面试】手写Promise #37