前端
面试题
前端
面试题

一手写Promise的代码实现

1.1 Promise 的基本使用

1.1.1 Promise 的状态

Promise 的使用过程中,我们可以将它的状态划分为三个:

  • 待定(pending):初始状态,既没有被兑现,也没有被拒绝
    • 当执行 executor 中的代码时,处于该状态
  • 已兑现(fulfilled):意味着操作成功完成
    • 执行了 resolve 时,处于该状态
  • 已拒绝(rejected):意味着操作失败
    • 执行了 reject 时处于该状态

1.1.2 executor

  • executor 是在创建 Promise 时需要传入的一个回调函数,这个回调函数会被立即只看,并且传入两个参数 resolve 和 reject
  • 通常我们会在 executor 中确定我们的 Promise 状态:
    • 通过 resolve,可以兑现(fulfilled)Promise 的状态,我们称之为已决议(resolved)
    • 通过 reject 可以拒绝(reject)Promise 的状态
  • 需要注意:一旦状态被确定下来,Promise 的状态会被锁死,该 Promise 的状态是不可更改的
    • 在我们调用 resolve 的时候,如果 resolve 传入的值本身不是一个 Promise,那么会将该 Promise 的状态变成兑现(fulfilled)
    • 在之后我们去调用 reject 时已经不会有任何的响应了(并不是这行代码不会执行,而是无法改变 Promise 的状态)

1.1.3 resolve 参数不同的区别

情况一:如果 resolve 传入一个普通的值或者对象,那么这个值会作为 then 回调的参数

普通的值或者对象 pending -> fulfilled

//
new Promise((resolve, reject) => {
  resolve('normal resolve')
}).then((res) => {
  console.log(res)
})

情况二:如果 resolve 中传入的是另外一个 Promise,那么这个新 Promise 会决定原 Promise 的状态

  • 传入一个Promise
    • 那么当前的Promise的状态会由传入的Promise来决定
    • 相当于状态进行了移交
new Promise((resolve, reject) => {
  resolve(
    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('第二个Promise')
      }, 3000)
    })
  )
})
  .then((res) => {
    console.log(res)
  })
  .catch((err) => {
    console.log(err)
  })

情况三:如果 resolve 中传入的是一个对象,并且这个对象有实现 then 方法,那么会执行该 then 方法,并且根据 then 方法的结果来决定 Promise 的状态

  • 传入一个对象, 并且这个对象有实现then方法(并且这个对象是实现了thenable接口)
  • 那么也会执行该then方法, 并且由该then方法决定后续状态
new Promise((resolve, reject) => {
  // pending -> fulfilled
  const obj = {
    then: function (resolve, reject) {
      // resolve("resolve message")
      reject('reject message')
    },
  }
  resolve(obj)
}).then(
  (res) => {
    console.log('res:', res)
  },
  (err) => {
    console.log('err:', err)
  }
)

1.1.4 Promise 对象方法-then

怎么查看 Promise 有那些对象方法? console.log(Object.getOwnPropertyDescriptors(Promise.prototype))

then 方法基本使用

  • then 方法是 Promise 对象上的一个方法:它其实放在 Promise 的原型上的 Promise.prototype.then
  • then 方法接受两个参数
    • fulfilled 的回调函数:当状态变成 fulfilled 时会回调的函数
    • reject 的回调函数:当状态变成 reject 时会回调的函数
promise.then(
  (res) => {
    console.log(res)
  },
  (err) => {
    console.log(err)
  }
)

then 方法多次调用

  • 一个 Promise 的 then 方法可以被多次调用
    • 每次调用我们都可以传入对应的 fulfilled 回调
    • 当 Promise 的状态变成 fulfilled 的时候,这些回调函数都会被执行
promise.then((res) => {
  console.log('res1:', res)
})

promise.then((res) => {
  console.log('res2:', res)
})

promise.then((res) => {
  console.log('res3:', res)
})

then 方法的返回值

  • then 方法本身是有返回值的,它的返回值是一个 Promise,所以我们可以进行如下的链式调用:
    • 但是 then 方法返回的 Promise 到底处于什么样的状态呢?
  • Promise 有三种状态,那么这个 Promise 处于什么状态呢?
    • 当 then 方法中的回调函数本身在执行的时候,那么它处于 pending 状态
    • 当 then 方法中的回调函数返回一个结果时,那么它处于 fulfilled 状态,并且会将结果作为 resolve 的参数
      • 情况一:返回一个普通的值
      • 情况二:返回一个 Promise
      • 情况三:返回一个 thenable 值
    • 当 then 方法抛出一个异常时,那么它处于 reject 状态
// then返回一个普通的值
const promise = new Promise((resolve, rejct) => {
  setTimeout(() => {
    resolve(10)
  }, 1000)
})

promise
  .then((res) => {
    console.log(res)
    return 20
  })
  .then((res) => {
    console.log(res, 'res')
  })

// 返回一个Promise
promise
  .then((res) => {
    console.log(res)
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('promise')
      }, 1000)
    })
  })
  .then((res) => {
    console.log(res, 'res')
  })

// 返回一个thenable
promise
  .then((res) => {
    console.log(res)
    return {
      then: function (resolve, reject) {
        resolve('返回一个thenable')
      },
    }
  })
  .then((res) => {
    console.log(res, 'res')
  })

1.1.5 Promise 对象方法-catch

catch 方法多次调用

  • catch 方法也是 Promise 对象上的一个方法:它也是放在 Promise 的原型上的 Promise.prototype.catch
  • 一个 Promise 的 catch 方法是可以被多次调用的
    • 每次调用我们都可以传入对应的 reject 回调
    • 当 Promise 的状态变成 reject 的时候,这些回调函数都会被执行
promise.catch((err) => {
  console.log(err)
})

promise.catch((err) => {
  console.log(err)
})

promise.catch((err) => {
  console.log(err)
})

错误捕获

  1. 当executor抛出异常时, 也是会调用错误(拒绝)捕获的回调函数的
const promise = new Promise((resolve, reject) => {
  // reject("rejected status")
  throw new Error('rejected status')
})

promise.then(undefined, (err) => {
  console.log('err:', err)
  console.log('----------')
})
  1. 通过catch方法来传入错误(拒绝)捕获的回调函数
promise.catch((err) => {
  console.log('err:', err)
})
promise
  .then((res) => {
    return new Promise((resolve, reject) => {
      reject('then rejected status')
    })
    // throw new Error("error message")
  })
  .catch((err) => {
    console.log('err:', err)
  })
  1. 拒绝捕获的问题
promise.then(
  (res) => {},
  (err) => {
    console.log('err:', err)
  }
)

const promise = new Promise((resolve, reject) => {
  reject('111111')
  // resolve()
})

promise
  .then((res) => {})
  .then((res) => {
    throw new Error('then error message')
  })
  .catch((err) => {
    console.log('err:', err)
  })

promise.catch((err) => {
  console.log('🚀 ~~- err:', err)
})

catch 的返回值

事实上 catch 方法也是会返回一个 Promise 对象的,所以 catch 方法后面我们可以继续调用 then 方法或者 catch 方法

  • 下面的代码中后续是 res 在执行,这是因为 catch 传入的回调在执行完后,默认状态依然会是 fulfilled 的
const promise = new Promise((resolve, reject) => {
  reject(111)
})

promise
  .catch((err) => {
    console.log('err1', err)
  })
  .catch((err) => {
    console.log('err2', err)
  })
  .then((res) => {
    console.log('res', res)
  })

如果我们希望后续继续执行 catch,那么需要抛出一个异常:

promise
  .catch((err) => {
    console.log('err1', err)
    throw new Error('error message')
  })
  .catch((err) => {
    console.log('err2', err)
  })
  .then((res) => {
    console.log('res', res)
  })

catch 的返回值会继续执行 then 方法:

const promise = new Promise((resolve, reject) => {
  reject('111111')
})

promise
  .then((res) => {
    console.log('res1:', res)
  })
  .catch((err) => {
    console.log('err1:', err)
    return 'catch return value'
  })
  .then((res) => {
    console.log('res1 result:', res)
  })
  .catch((err) => {
    console.log('err1 result:', err)
  })

1.1.6 Promise 对象方法-finally

  • finally 是在 ES 9 中新增的一个特性:表示无论他 Promise 对象无论变成 fulfilled 还是 reject 状态,最终都会被执行的代码
  • finally 方法是不接受参数的,因为无论前面是 fulfilled 状态,还是 reject 状态,它都会执行
const promise = new Promise((resolve, reject) => {
  // resolve("resolve message")
  reject('reject message')
})

promise
  .then((res) => {
    console.log('res:', res)
  })
  .catch((err) => {
    console.log('err:', err)
  })
  .finally(() => {
    console.log('finally code execute')
  })

1.1.7 Promise 类方法-resolve

  • 有时候我们已经有一个现成的内容了,仙王将其转成 Promise 来使用,这个时候我们可以使用 Promise.resolve 方法来完成:
    • Promise.resolve 的用法相当于 new Promise,并且执行 resolve 方法
  • resolve 的参数的形态:
    • 情况一:参数是一个普通的值或者对象
    • 情况二:参数本身是 Promise
    • 情况三:参数是一个 thenable
// 情况一
const promise = Promise.resolve({ name: 'why' })
相当于
const promise2 = new Promise((resolve, reject) => {
  resolve({ name: 'why' })
})

// 情况二
const promise = Promise.resolve(
  new Promise((resolve, reject) => {
    resolve('11111')
  })
)

promise.then((res) => {
  console.log('res:', res)
})

// 情况三
const promise = Promise.resolve({
  then: function (resolve, reject) {
    resolve(`thenable`)
  },
})

promise.then(
  (res) => {
    console.log(res)
  },
  (err) => {
    console.log(err)
  }
)

1.1.7 reject 方法

  • reject 方法类似于 resolve 方法,只是会将 Promise 对象的状态设置为 reject 状态
  • Promise.reject 的用法相当于 new Promise,只是会调用 reject
  • Promise.reject 传入的参数无论是什么形态,都会直接作为 reject 状态的参数传递到 catch 的
const promise = Promise.reject('rejected message')
// 相当于
const promise2 = new Promsie((resolve, reject) => {
  reject('rejected message')
})

// 注意: 无论传入什么值都是一样的
const promise = Promise.reject(new Promise(() => {}))

promise
  .then((res) => {
    console.log('res:', res)
  })
  .catch((err) => {
    console.log('err:', err)
  })

1.1.8 Promise 类方法-all

  • 另一个类方法是 Promise.all
    • 它的作用是将多个 Promise 包裹在一起形成一个新的 Promise
    • 新的 Promise 状态由包裹的所有 Promise 共同决定:
      • 当所有的 Promise 状态变成 fulfilled 状态时,新的 Promise 状态为 fulfilled,并且会将所有 Promise 的返回值组成一个数组
      • 当有一个 Promise 的状态为 reject 时,新的 Promise 状态为 reject,并且会将第一个 reject 的返回值作为参数
// 创建多个Promise
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(11111)
  }, 1000)
})

const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(22222)
  }, 2000)
})

const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(33333)
  }, 3000)
})

// 需求: 所有的Promise都变成fulfilled时, 再拿到结果
// 意外: 在拿到所有结果之前, 有一个promise变成了rejected, 那么整个promise是rejected
Promise.all([p2, p1, p3, 'aaaa'])
  .then((res) => {
    console.log(res)
  })
  .catch((err) => {
    console.log('err:', err)
  })

1.1.9 allSettled 方法

  • all 方法有一个缺陷,当有其中一个 Promise 变成 reject 状态时,新 Promise 就会立即变成对应的 reject 状态
    • 那么对于 resolve 的以及依然处于 pending 状态的 Promise,我们是获取不到对应的结果的
  • 在 ES 11 中,添加了新的 API Promise.allSettled:
    • 该方法会在所有的 Promise 都有结果(settled),无论是 fulfilled 还是 reject 时,才会有最终的状态
    • 并且这个 Promise 的结果一定是 fulfilled 的
// 创建多个Promise
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(11111)
  }, 1000)
})

const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(22222)
  }, 2000)
})

const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(33333)
  }, 3000)
})

// allSettled
Promise.allSettled([p1, p2, p3])
  .then((res) => {
    console.log(res)
  })
  .catch((err) => {
    console.log(err)
  })
/* 结果
[
  { status: 'fulfilled', value: 11111 },
  { status: 'rejected', reason: 22222 },
  { status: 'fulfilled', value: 33333 }
]
*/

1.1.10 race 方法

  • 如果有一个 Promise 有了结果,我们就希望决定最终 Promise 的状态,那么可以使用 race 方法
    • race 是竞技竞赛的意思,表示多个 Promise 相互竞争,谁先有结果,那么就使用谁的结果
// 创建多个Promise
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(11111)
  }, 3000)
})

const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(22222)
  }, 500)
})

const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(33333)
  }, 1000)
})

// race: 竞技/竞赛
// 只要有一个Promise变成fulfilled状态, 那么就结束
// 意外:
Promise.race([p1, p2, p3])
  .then((res) => {
    console.log('res:', res)
  })
  .catch((err) => {
    console.log('err:', err)
  })

1.1.11 any 方法

  • any 方法是 ES 12 中新增的方法,和 race 方法是类似的:
    • any 方法会等到 fulfilled 状态,才会决定新 Promise 的状态
    • 如果所有的 Promise 都是 reject 的,那么也会等到所有的 Promise 都变成 rejected 状态
    • 如果所有的 Promise 都是 reject 的,那么会报一个AggregateError 的错误
// 创建多个Promise
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    // resolve(11111)
    reject(1111)
  }, 1000)
})

const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(22222)
  }, 500)
})

const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    // resolve(33333)
    reject(3333)
  }, 3000)
})

// any方法
Promise.any([p1, p2, p3])
  .then((res) => {
    console.log('res:', res)
  })
  .catch((err) => {
    console.log('err:', err.errors)
  })

1.2 手写 Promise

1.2.1 构造函数的规划

const PROMISE_STATUS_PENDING = 'pending'
const PROMISE_STATUS_FULFILLED = 'fulfilled'
const PROMISE_STATUS_REJECTED = 'rejected'

// 工具函数 抽离出公共逻辑
function execFunctionWithCatchError(execFn, value, resolve, reject) {
  try {
    const result = execFn(value)
    resolve(result)
  } catch (err) {
    reject(err)
  }
}

class MYPromise {
  constructor(executor) {
    this.status = PROMISE_STATUS_PENDING
    this.value = undefined
    this.reason = undefined
    this.onFulfilledFns = []
    this.onRejectedFns = []

    const resolve = (value) => {
      if (this.status === PROMISE_STATUS_PENDING) {
        queueMicrotask(() => {
          if (this.status !== PROMISE_STATUS_PENDING) return
          this.status = PROMISE_STATUS_FULFILLED
          this.value = value
          console.log('resolve被调用了')
          // 执行then传进来的第一个回调函数
          this.onFulfilledFns.forEach((fn) => {
            fn(this.value)
          })
        })
      }
    }
    const reject = (reason) => {
      if (this.status === PROMISE_STATUS_PENDING) {
        queueMicrotask(() => {
          if (this.status !== PROMISE_STATUS_PENDING) return
          this.status = PROMISE_STATUS_REJECTED
          this.reason = reason
          console.log('reject被调用了')
          // 执行then传进来的第二个回调函数
          this.onRejectedFns.forEach((fn) => {
            fn(this.reason)
          })
        })
      }
    }
    try {
      executor(resolve, reject)
    } catch (e) {
      reject(e)
    }
  }
  then(onFulfilled, onRejected) {
    const defaultOnRejected = (err) => {
      throw err
    }
    onRejected = onRejected || defaultOnRejected

    const defaultFulfilled = (value) => {
      return value
    }
    onFulfilled = onFulfilled || defaultFulfilled

    return new MYPromise((resolve, reject) => {
      // 如果在then调用的时候 状态已经确定下来了
      if (this.status === PROMISE_STATUS_FULFILLED) {
        execFunctionWithCatchError(onFulfilled, this.value, resolve, reject)
      }
      if (this.status === PROMISE_STATUS_REJECTED) {
        execFunctionWithCatchError(onRejected, this.reason, resolve, reject)
      }

      if (this.status === PROMISE_STATUS_PENDING) {
        // 将成功回调和失败回调放到数组中
        this.onFulfilledFns.push(() => {
          execFunctionWithCatchError(onFulfilled, this.value, resolve, reject)
        })
        this.onRejectedFns.push(() => {
          execFunctionWithCatchError(onRejected, this.reason, resolve, reject)
        })
      }
    })
  }

  catch(onRejected) {
    return this.then(undefined, onRejected)
  }

  finally(onFinally) {
    this.then(
      () => {
        onFinally()
      },
      () => {
        onFinally()
      }
    )
  }

  static resolve(value) {
    return new MYPromise((resolve) => resolve(value))
  }
  static reject(reason) {
    return new MYPromise((resolve, reject) => reject(reason))
  }
  static all(promises) {
    return new MYPromise((resolve, reject) => {
      const values = []
      promises.forEach((promise) => {
        promise.then(
          (res) => {
            values.push(res)
            if (values.length === promises.length) {
              resolve(values)
            }
          },
          (err) => {
            reject(err)
          }
        )
      })
    })
  }

  static allSettled(promises) {
    return new MYPromise((resolve) => {
      const results = []
      promises.forEach((promise) => {
        promise.then(
          (res) => {
            results.push({
              status: PROMISE_STATUS_FULFILLED,
              value: res,
            })
            if (results.length === promises.length) {
              resolve(results)
            }
          },
          (err) => {
            results.push({
              status: PROMISE_STATUS_REJECTED,
              reason: err,
            })
            if (results.length === promises.length) {
              resolve(results)
            }
          }
        )
      })
    })
  }

  static race() {
    return new MYPromise((resolve, reject) => {
      promises.forEach((promise) => {
        promise.then(resolve, reject)
      })
    })
  }

  static any(promises) {
    const reasons = []
    return new MYPromise((resolve, reject) => {
      promises.forEach((promise) => {
        promise.then(resolve, (err) => {
          reasons.push(err)
          if (reasons.length === promises.length) {
            reject(new AggregateError(reasons))
          }
        })
      })
    })
  }
}