Promise 面试常考手写方法汇总

795 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第10天,点击查看活动详情

前言

列举面试常考的Promise静态方法

  1. Promise.all
  2. Promise.allSettled
  3. Promise.race
  4. Promise.resolve
  5. Promise.finally
  6. Promise.catch

没涉及到的可评论补充,我更新文章

Promise.all

所有(异步/非异步)任务执行完,必须所有都成功

Promise.prototype.myAll = (array) => {
  let result = []
  let index = 0
  // 返回promise为了链式调用 
  return new Promise((resolve, reject) => {
    // 归纳数据方法
    function addData(key, value) {
      result[key] = value
      if (++index === array.length) {
        resolve(result)
      }
    }
    // 遍历数组参数执行异步任务
    for(let i = 0; i < array.length; i++){
      let current = array[i]
      if (current instanceof Promise) {
        // promise 对象
        current.then(value => addData(i, value), reason => reject(reason))
      } else {
        // 普通值
        addData(i, array[i])
      }
    }
  })
}

Promise.allSettled

所有(异步/非异步)任务执行完,不管成功失败都输出,并且附带状态

Promise.prototype.myAllSettled = (array) => {
  let result = []
  let index = 0
  // 返回promise为了链式调用 
  return new Promise((resolve, reject) => {
    // 归纳数据方法
    function addData(key, status, value) {
      result[key] = {status, value}
      if (++index === array.length) {
        resolve(result)
      }
    }
    // 遍历数组参数执行异步任务
    for(let i = 0; i < array.length; i++){
      let current = array[i]
      if (current instanceof Promise) {
        // promise 对象
        current.then(value => {
          addData(i, 'fulfilled', value)
        }, reason => {
          addData(i, 'rejected', reason)
        })
      } else {
        // 普通值
        addData(i, 'fulfilled', array[i])
      }
    }
  })
}

Promise.race

输出(异步/非异步)任务执行最快的一个

Promise.prototype.myRace = (array) => {
  // 返回promise为了链式调用 
  return new Promise((resolve, reject) => {
    // 遍历数组参数执行异步任务
    for(let i = 0; i < array.length; i++){
      let current = array[i]
      if (current instanceof Promise) {
        // promise 对象
        current.then(value => resolve(value), reason => reject(reason))
      } else {
        // 普通值
        resolve(current)
      }
    }
  })
}

Promise.resolve

将给定的值转换为promise对象

Promise.prototype.myResolve = (value) => {
  if (value instanceof Promise) {
   return value;
  }
  return new Promise(reslove => reslove(value))
}

Promise.finally

不管promise成功还是失败,finally方法都会被调用
借用then方法拿到promise链式调用结果

finally(callback) {
  return this.then(value => {
    return Promise.resolve(callback()).then(() => value)
  }, reason => {
    return Promise.resolve(callback()).then(() => { throw reason })
  })
}

Promise.catch

只需要借助then的失败回调

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

...

基本覆盖常考点,大家需要可继续补充,求点一个赞!

往期精彩文章

🌟Promise 常见误区
🌟js 柯里化艺术
🌟简述BFC是什么,以及在工作中的应用场景
🌟从浏览器输入网址到页面渲染中间发生了什么(通俗易懂)
🌟发布订阅/观察者模式-真正对比区别