字节飞书面试promise.all实现示例


Posted in Javascript onJune 16, 2022

前言

金三银四,身为大四即将成为毕业生的我迫不及待地将简历投进了字节的飞书部门,本想着掂量一下几斤几两,没想到这一掂就露馅了?,去大厂的梦想就这么跌倒在了Promsie.all上。但年轻人总是要有斗志的,从哪里跌到就从哪里爬起来!下面是复盘时间。

何为Promise.all?

Promise.all 是 es6 Promise 对象上的一个方法,它的功能就是将多个Promise实例包装成一个promise实例。以下是 MDN 对 Promise.all 的描述:

Promise.all() 方法接收一个 promise 的 iterable 类型(注:Array,Map,Set都属于ES6的iterable类型)的输入,并且只返回一个Promise实例, 那个输入的所有 promise 的 resolve 回调的结果是一个数组。这个Promise的 resolve 回调执行是在所有输入的 promise 的 resolve 回调都结束,或者输入的 iterable 里没有 promise 了的时候。它的 reject 回调执行是,只要任何一个输入的 promise 的 reject 回调执行或者输入不合法的 promise 就会立即抛出错误,并且reject的是第一个抛出的错误信息。

我戴上我的300度近视眼镜,仔细地提取出这段描述中的关键字

  • Promise.all 的返回值是一个新的 Promise 实例。
  • Promise.all 接受一个可遍历的数据容器,容器中每个元素都应是 Promise 实例。咱就是说,假设这个容器就是数组。
  • 数组中每个 Promise 实例都成功时(由pendding状态转化为fulfilled状态),Promise.all 才成功。这些 Promise 实例所有的 resolve 结果会按照原来的顺序集合在一个数组中作为 Promise.allresolve 的结果。
  • 数组中只要有一个 Promise 实例失败(由pendding状态转化为rejected状态),Promise.all 就失败。Promise.all.catch() 会捕获到这个 reject

原生 Promise.all 测试

咱先看看原生的Promise.all的是啥效果。

const p1 = Promise.resolve('p1')

const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('p2 延时一秒')
  }, 1000)
})

const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('p3 延时两秒')
  }, 2000)
})

const p4 = Promise.reject('p4 rejected')

const p5 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('p5 rejected 延时1.5秒')
  }, 1500)
})

// 所有Promise实例都成功
Promise.all([p1, p2, p3])
  .then(res => {
    console.log(res)
  })
  .catch(err => console.log(err)) // 2秒后打印 [ 'p1', 'p2 延时一秒', 'p3 延时两秒' ]
  
// 一个Promise实例失败
Promise.all([p1, p2, p4])
  .then(res => {
    console.log(res)
  })
  .catch(err => console.log(err)) // p4 rejected
  
// 一个延时失败的Promise
 Promise.all([p1, p2, p5])
  .then(res => {
    console.log(res)
  })
  .catch(err => console.log(err)) // 1.5秒后打印 p5 rejected
  
// 两个Promise实例失败
Promise.all([p1, p4, p5])
  .then(res => {
    console.log(res)
  })
  .catch(err => console.log(err)) // p4 rejected


复制代码

注意

上面 p4p5 在未传入 Promise.all 时需要注释掉,因为一个调用了 rejectPromise 实例如果没有使用 .catch() 方法去捕获错误会报错。但如果 Promise 实例定义了自己的 .catch,就不会触发 Promise.all.catch() 方法。

OK,理论存在,实践开始!

手动实现Promise.all

  • Promise.all 接受一个数组,返回值是一个新的 Promise 实例
Promise.MyAll = function (promises) {
  return new Promise((resolve, reject) => {

  })
}
复制代码
  • 数组中所有 Promise 实例都成功,Promise.all 才成功。不难想到,咱得需要一个数组来收集这些 Promise 实例的 resolve 结果。但有句俗话说得好:“不怕一万,就怕万一”,万一数组里面有元素不是 Promise咋办 —— 那就得用 Promise.resolve() 把它办了。这里还有一个问题,Promise 实例是不能直接调用 resolve 方法的,咱得在 .then() 中去收集结果。注意要保持结果的顺序。
Promise.MyAll = function (promises) {
  let arr = []
  return new Promise((resolve, reject) => {
    promises.forEach((item, i) => {
      Promise.resolve(item).then(res => {
        arr[i] = res
      })
    }) 
  })
}
复制代码
  • 将收集到的结果(数组arr)作为参数传给外层的 resolve 方法。这里咱们肯定是有一个判断条件的,如何判断所有 Promise 实例都成功了呢?新手容易写出这句代码(没错就是我本人了?):
if (arr.length === promises.length) resolve(arr)
复制代码

咱仔细想想 Promise 使用来干嘛的 —— 处理异步任务。对呀,异步任务很多都需要花时间呀,如果这些 Promise 中最后一个先完成呢?那 arr 数组不就只有最后一项了,前面的所有项都是 empty。所以这里咱们应该创建一个计数器,每有一个 Promise 实例成功,计数器加一:

Promise.MyAll = function (promises) {
  let arr = [],
    count = 0
  return new Promise((resolve, reject) => {
    promises.forEach((item, i) => {
      Promise.resolve(item).then(res => {
        arr[i] = res
        count += 1
        if (count === promises.length) resolve(arr)
      })
    })
  })
}
复制代码
  • 最后就是处理失败的情况了,这里有两种写法,第一种是用 .catch() 方法捕获失败:
Promise.MyAll = function (promises) {
  let arr = [],
    count = 0
  return new Promise((resolve, reject) => {
    promises.forEach((item, i) => {
      Promise.resolve(item).then(res => {
        arr[i] = res
        count += 1
        if (count === promises.length) resolve(arr)
      }).catch(reject)
    })
  })
}
复制代码

第二种写法就是给 .then() 方法传入第二个参数,这个函数是处理错误的回调函数:

Promise.MyAll = function (promises) {
  let arr = [],
    count = 0
  return new Promise((resolve, reject) => {
    promises.forEach((item, i) => {
      Promise.resolve(item).then(res => {
        arr[i] = res
        count += 1
        if (count === promises.length) resolve(arr)
      }, reject)
    })
  })
}
复制代码

测试案例

致此 Promise.all 大功告成,赶紧拿来测试一下(摩拳擦掌):

const p1 = Promise.resolve('p1')
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('p2 延时一秒')
  }, 1000)
})
const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('p3 延时两秒')
  }, 2000)
})

const p4 = Promise.reject('p4 rejected')

const p5 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('p5 rejected 延时1.5秒')
  }, 1500)
})

// 所有 Promsie 都成功
Promise.MyAll([p1, p2, p3])
  .then(res => console.log(res))
  .catch(err => console.log(err)) // 2秒后打印 [ 'p1', 'p2 延时一秒', 'p3 延时两秒' ]
  
// 一个 Promise 失败
Promise.MyAll([p1, p2, p4])
  .then(res => console.log(res))
  .catch(err => console.log(err)) // p4 rejected
  
// 一个延时失败的 Promise
Promise.MyAll([p1, p2, p5])
  .then(res => console.log(res))
  .catch(err => console.log(err)) // 1.5秒后打印 p5 rejected 延时1.5秒
 
// 两个失败的 Promise
Promise.MyAll([p1, p4, p5])
  .then(res => console.log(res))
  .catch(err => console.log(err)) // p4 rejected
复制代码

“OhOhOhOh~~~~”,与原生的 Promise.all运行结果不能说很像,只能说一模一样。老话说的好,趁热打铁——正在火候上。我打开某个学习网站(MDN Web Docs (mozilla.org)),了解到 Promise 对象用于同时处理多个 Promise 的方法还有 Promise.racePromise.anyPromise.allSettle。从小老师就教会了咱们举一反三,仔细看了这三个方法的描述之后,我还真给反出来了?。

Promise.race

Promise.race 从字面意思理解就是赛跑,以状态变化最快的那个 Promise 实例为准,最快的 Promise 成功 Promise.race 就成功,最快的 Promise 失败 Promise.race 就失败。

咱来看看原生 Promise.race 效果

原生 Promise.race 测试

const p1 = Promise.resolve('p1')
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('p2 延时一秒')
  }, 1000)
})
const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('p3 延时两秒')
  }, 2000)
})

const p4 = Promise.reject('p4 rejected')

const p5 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('p5 rejected 延时1秒')
  }, 1500)
})

// p1无延时,p2延时1s,p3延时2s
Promise.race([p1, p2, p3])
  .then(res => console.log(res))
  .catch(err => console.log(err)) // p1

// p4无延时reject
Promise.race([p4, p2, p3])
  .then(res => console.log(res))
  .catch(err => console.log(err)) // p4 rejected
  
// p5 延时1.5秒reject,p2延时1s
Promise.race([p5, p2, p3])
  .then(res => console.log(res))
  .catch(err => console.log(err)) // 1s后打印: p2 延时一秒
复制代码

理论存在,实践开始

手写Promise.race

整体流程与 Promise 差不多,只是对数组中的 Promise 实例处理的逻辑不一样,这里我们需要将最快改变状态的 Promise 结果作为 Promise.race 的结果,相对来说就比较简单了,代码如下:

Promise.MyRace = function (promises) {
  return new Promise((resolve, reject) => {
    // 这里不需要使用索引,只要能循环出每一项就行
    for (const item of promises) {
      Promise.resolve(item).then(resolve, reject)
    }
  })
}
复制代码

测试案例

还是刚才几个案例,咱就不重复写了?

// p1无延时,p2延时1s,p3延时2s
Promise.MyRace([p1, p2, p3])
  .then(res => console.log(res))
  .catch(err => console.log(err)) // p1

// p4无延时reject
Promise.MyRace([p4, p2, p3])
  .then(res => console.log(res))
  .catch(err => console.log(err)) // p4 rejected
  
// p5 延时1.5秒reject,p2延时1s
Promise.MyRace([p5, p2, p3])
  .then(res => console.log(res))
  .catch(err => console.log(err)) // 1s后打印: p2 延时一秒
复制代码

可以看到,结果与原生的 Promise.race 是一致的,成功!

Promise.any

Promise.anyPromise.all 可以看做是相反的。Promise.any 中只要有一个 Promise 实例成功就成功,只有当所有的 Promise 实例失败时 Promise.any 才失败,此时Promise.any 会把所有的失败/错误集合在一起,返回一个失败的 promise AggregateError类型的实例。MDN 上说这个方法还处于试验阶段,如果 node 或者浏览器版本过低可能无法使用,各位看官自行测试下。

原生 Promise.any 测试

const p1 = Promise.resolve('p1')
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('p2 延时一秒')
  }, 1000)
})
const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('p3 延时两秒')
  }, 2000)
})

const p4 = Promise.reject('p4 rejected')

const p5 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('p5 rejected 延时1.5秒')
  }, 1500)
})

// 所有 Promise 都成功
Promise.any([p1, p2, p3])
  .then(res => console.log(res))
  .catch(err => console.log(err)) // p1
  
// 两个 Promise 成功
Promise.any([p1, p2, p4])
  .then(res => console.log(res))
  .catch(err => console.log(err)) // p1

// 只有一个延时成功的 Promise
Promise.any([p2, p4, p5])
  .then(res => console.log(res))
  .catch(err => console.log(err)) // p2 延时1秒

// 所有 Promise 都失败
Promise.any([p4, p5])
  .then(res => console.log(res))
  .catch(err => console.log(err)) // AggregateError: All promises were rejected
复制代码

可以看出,如果 Promise.any 中有多个成功的 Promise 实例,则以最快成功的那个结果作为自身 resolve 的结果。

OK,理论存在,实践开始

手写Promise.any

  • 依葫芦画瓢,咱们先写出 Promise.any 的整体结构:
Promise.MyAny = function (promises) {
  return new Promise((resolve, reject) => {
    promises.forEach((item, i) => {

    })
  })
}
复制代码
  • 这里跟Promise.all 的逻辑是反的,咱们需要收集 rejectPromise,也需要一个数组和计数器,用计数器判断是否所有的 Promise 实例都失败。另外在收集失败的 Promise 结果时咱需要打上一个失败的标记方便分析结果。
Promise.MyAny = function (promises) {
  let arr = [],
    count = 0
  return new Promise((resolve, reject) => {
    promises.forEach((item, i) => {
      Promise.resolve(item).then(resolve, err => {
        arr[i] = { status: 'rejected', val: err }
        count += 1
        if (count === promises.length) reject(new Error('没有promise成功'))
      })
    })
  })
}
复制代码

这里我没有使用 MDN 上规定的 AggregateError 实例,手写嘛,随心所欲一点,写自己看着舒服的?

测试案例

// 所有 Promise 都成功
Promise.MyAny([p1, p2, p3])
  .then(res => console.log(res))
  .catch(err => console.log(err)) // p1
  
// 两个 Promise 成功
Promise.MyAny([p1, p2, p4])
  .then(res => console.log(res))
  .catch(err => console.log(err)) // p1

// 只有一个延时成功的 Promise
Promise.MyAny([p2, p4, p5])
  .then(res => console.log(res))
  .catch(err => console.log(err)) // p2 延时1秒

// 所有 Promise 都失败
Promise.MyAny([p4, p5])
  .then(res => console.log(res))
  .catch(err => console.log(err)) // 没有promise成功
复制代码

Promise.allSettled

有时候,咱代码人总是会有点特殊的需求:如果咱希望一组 Promise 实例无论成功与否,都等它们异步操作结束了在继续执行下一步操作,这可如何是好?于是就出现了 Promise.allSettled

原生 Promise.allSettled 测试

const p1 = Promise.resolve('p1')
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('p2 延时一秒')
  }, 1000)
})
const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('p3 延时两秒')
  }, 2000)
})

const p4 = Promise.reject('p4 rejected')

const p5 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('p5 rejected 延时1.5秒')
  }, 1500)
})

// 所有 Promise 实例都成功
Promise.allSettled([p1, p2, p3])
  .then(res => console.log(res))
  .catch(err => console.log(err)) 
// [
//   { status: 'fulfilled', value: 'p1' },
//   { status: 'fulfilled', value: 'p2 延时一秒' },
//   { status: 'fulfilled', value: 'p3 延时两秒' }
// ]

// 有一个 Promise 失败
Promise.allSettled([p1, p2, p4])
  .then(res => console.log(res))
  .catch(err => console.log(err))
// [
//   { status: 'fulfilled', value: 'p1' },
//   { status: 'fulfilled', value: 'p2 延时一秒' },
//   { status: 'rejected' , value: 'p4 rejected' }
// ]

// 所有 Promise 都失败
Promise.allSettled([p4, p5])
  .then(res => console.log(res))
  .catch(err => console.log(err))
// [
//   { status: 'rejected', reason: 'p4 rejected' },
//   { status: 'rejected', reason: 'p5 rejected 延时1.5秒' }
// ]
复制代码

可以看到,与 Promise.any 类似,Promise.allSettled 也给所有收集到的结果打上了标记。而且 Promise.allSettled 是不会变成 rejected 状态的,不管一组 Promise 实例的各自结果如何,Promise.allSettled 都会转变为 fulfilled 状态。

OK,理论存在,实践开始

手写 Promise.allSettled

咱就是说,得用个数组把所有的 Promise 实例的结果(无论成功与否)都收集起来,判断收集完了(所有 Promise 实例状态都改变了),咱就将这个收集到的结果 resolve 掉。收集成功 Promise 结果的逻辑咱们在 Promise.all 中实现过,收集失败 Promise 结果咱们在 Promise.any 中处理过。这波,这波是依葫芦画瓢——照样。

Promise.MyAllSettled = function (promises) {
  let arr = [],
    count = 0
  return new Promise((resolve, reject) => {
    promises.forEach((item, i) => {
      Promise.resolve(item).then(res => {
        arr[i] = { status: 'fulfilled', val: res }
        count += 1
        if (count === promises.length) resolve(arr)
      }, (err) => {
        arr[i] = { status: 'rejected', val: err }
        count += 1
        if (count === promises.length) resolve(arr)
      })
    })
  })
}
复制代码

这代码,逻辑上虽说没问题,但各位优秀的程序员们肯定是看不顺眼的,怎么会有两段重复的代码捏,不行,咱得封装一下。

Promise.MyAllSettled = function (promises) {
  let arr = [],
    count = 0
  return new Promise((resolve, reject) => {
    const processResult = (res, index, status) => {
      arr[index] = { status: status, val: res }
      count += 1
      if (count === promises.length) resolve(arr)
    }

    promises.forEach((item, i) => {
      Promise.resolve(item).then(res => {
        processResult(res, i, 'fulfilled')
      }, err => {
        processResult(err, i, 'rejected')
      })
    })
  })
}
复制代码

perfect,俗话说得好:没病走两步。老样子,给代码跑几个案例。

测试案例

// 所有 Promise 实例都成功
Promise.MyAllSettled([p1, p2, p3])
  .then(res => console.log(res))
  .catch(err => console.log(err)) 
// [
//   { status: 'fulfilled', value: 'p1' },
//   { status: 'fulfilled', value: 'p2 延时一秒' },
//   { status: 'fulfilled', value: 'p3 延时两秒' }
// ]

// 有一个 MyAllSettled 失败
Promise.allSettled([p1, p2, p4])
  .then(res => console.log(res))
  .catch(err => console.log(err))
// [
//   { status: 'fulfilled', value: 'p1' },
//   { status: 'fulfilled', value: 'p2 延时一秒' },
//   { status: 'rejected' , value: 'p4 rejected' }
// ]

// 所有 MyAllSettled 都失败
Promise.allSettled([p4, p5])
  .then(res => console.log(res))
  .catch(err => console.log(err))
// [
//   { status: 'rejected', reason: 'p4 rejected' },
//   { status: 'rejected', reason: 'p5 rejected 延时1.5秒' }
// ]
复制代码

致此,大功告成,我可以骄傲地对妈妈说:“妈妈,我再也不怕 Promise.all”了

结语

这次字节飞书面试对我来说是一个巨大的机遇,第一次体验面大厂的感觉,可能有暴躁老哥要说了:“字节面试题就这?你是水文章骗赞的吧”。害,没办法,主要是我太菜了,从代码不知为何物到现在前端学习者,尔来8月右一周矣,水平确实比较次,面试官比较和善,就没有为难我,问的问题都比较基础。但我仍然收获颇丰,感谢字节团队,感谢前端这个包容、进步的环境,我会好好总结这次面试,尽可能地提升自己,加油!

参考文章

因为实现不了Promise.all,一场面试凉凉了 

Promise 对象 - ECMAScript 6入门 (ruanyifeng.com)

以上就是字节飞书面试promise.all实现示例的详细内容,更多关于字节面试promise.all的资料请关注三水点靠木其它相关文章!


Tags in this post...

Javascript 相关文章推荐
兼容Mozilla必须知道的知识。
Jan 09 Javascript
Javascript-Mozilla和IE中的一个函数直接量的问题
Jan 09 Javascript
jQuery阻止事件冒泡具体实现
Oct 11 Javascript
js控制href内容的连接内容的变化示例
Apr 30 Javascript
bootstrap table 服务器端分页例子分享
Feb 10 Javascript
javascript检测两个数组是否相似
May 19 Javascript
jQuery检测滚动条是否到达底部
Dec 15 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
May 11 Javascript
浅谈ES6 模板字符串的具体使用方法
Nov 07 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
Aug 21 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
Oct 28 Javascript
JS轻量级函数式编程实现XDM三
Jun 16 #Javascript
JS轻量级函数式编程实现XDM二
Jun 16 #Javascript
JS函数式编程实现XDM一
Jun 16 #Javascript
正则表达式基础与常用验证表达式
Jun 16 #Javascript
使用compose函数优化代码提高可读性及扩展性
html中两种获取标签内的值的方法
Jun 16 #jQuery
JavaScript前端面试扁平数据转tree与tree数据扁平化
Jun 14 #Javascript
You might like
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
CentOS下与Apache连接的PHP多版本共存方案实现详解
2015/12/19 PHP
PHP7 windows支持
2021/03/09 PHP
JS 控制CSS样式表
2009/08/20 Javascript
JavaScript中json使用自己总结
2013/08/13 Javascript
js去空格技巧分别去字符串前后、左右空格
2013/10/21 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
2014/05/05 Javascript
使用百度地图api实现根据地址查询经纬度
2014/12/11 Javascript
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
javascript 兼容各个浏览器的事件
2015/02/04 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
2016/01/19 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
2016/05/24 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
2016/11/25 Javascript
如何使用angularJs
2017/05/08 Javascript
vue实现商城上货组件简易版
2017/11/27 Javascript
AngularJS创建一个上传照片的指令实例代码
2018/02/24 Javascript
JavaScript中click和onclick本质区别与用法分析
2018/06/07 Javascript
Vue slot用法(小结)
2018/10/22 Javascript
[01:09:19]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第二场 2月28日
2021/03/11 DOTA
Python3实现的字典遍历操作详解
2018/04/18 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例
2020/02/26 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
2021/03/17 Javascript
PHP开发工程师面试问题集锦
2012/11/01 面试题
xml有哪些解析技术?区别是什么
2016/04/26 面试题
物业管理求职自荐信
2013/09/25 职场文书
医学院校毕业生自荐信范文
2014/01/01 职场文书
常务副总经理岗位职责
2014/04/12 职场文书
实验室的标语
2014/06/20 职场文书
法院干警四风问题个人对照检查材料思想汇报
2014/10/07 职场文书
体育个人工作总结
2015/02/09 职场文书
创业计划书之书店
2019/09/10 职场文书
Python&Matlab实现灰狼优化算法的示例代码
2022/03/21 Python