如何应用 Promise.all()

hello, 大家好，我是前端学长Joshua。
热心于做开源，写文章，目标为帮忙在校大学生，刚入职场的小伙伴能够尽快搭建本人的前端学习体系。
如果你有学习上的困惑，欢送关注我，找我交换，我实时回复大家。

Promise.all() 的介绍

Promise.all(promisesArrayOrIterable) 是javascript中的一个辅助函数。它能够帮忙咱们一次，并行处理多个promise, 而后将后果聚合到一个数组里边，这是聚合后果，不是说返回后果哦。

它实际上是返回一个promise对象。

参数：promise数组

const allPromise = Promise.all([promise1, promise2, ...]);

而后你能够通过 .then 来获取到 Promise.all(promisesArrayOrIterable) 解决之后的聚合后果

allPromise.then(values => {  values; // [valueOfPromise1, valueOfPromise2, ...]}).catch(error => {  error;  // rejectReason of any first rejected promise});

或者是应用async / await 语法：

try {  const values = await allPromise;  values; // [valueOfPromise1, valueOfPromise2, ...]} catch (error) {  error;  // rejectReason of any first rejected promise}s

对于 Promise.all() 中，最乏味的点就是，对于参数中，promise被 resolve / 被 reject 的解决形式。

如果所有 promise 都胜利解析，Promise.all() 会将每个 promise 的已实现值聚合到数组。咱们能够依照原来参数中每一个promise的程序，获取到他们对应的实现值。
如果有其中一个 promise 被回绝，那么 Promise.all() 会以同样的起因立刻回绝（不期待其余 Promise 解决）。

所以，Promise.all()的特点，记住三个词就能够了：

并行
聚合后果
疾速失败

上面的例子，都是围绕这三个外围词来开展的。

在进入例子之前，咱们先来写两个辅助函数:
resolveTimeout(value, delay)：回返回一个promise对象，这个promise对象会提早一段时间之后，触发 resolve
rejectTimeout(reason, delay)：回返回一个promise对象，这个promise对象会提早一段时间之后，触发 reject

function resolveTimeout(value, delay) {  return new Promise(    resolve => setTimeout(() => resolve(value), delay)  );}function rejectTimeout(reason, delay) {  return new Promise(    (r, reject) => setTimeout(() => reject(reason), delay)  );}

所有 promise 都被 reslove

const allPromise = Promise.all([  resolveTimeout(['potatoes', 'tomatoes'], 1000),  resolveTimeout(['oranges', 'apples'], 1000)]);// wait...const lists = await allPromise;// after 1 secondconsole.log(lists); // [['potatoes', 'tomatoes'], ['oranges', 'apples']]

从代码中，咱们能够晓得：

promises 数组的程序就是聚合后果的程序。
所有 promise 都被 reslove,resolve之后，每一个promsie的后果会被聚合到数组中

有一个 promise 被 reject

const allPromise = Promise.all([  resolveTimeout(['potatoes', 'tomatoes'], 1000),  rejectTimeout(new Error('Out of fruits!'), 1000)]);try {  // wait...  const lists = await allPromise;} catch (error) {  // after 1 second  console.log(error.message); // 'Out of fruits!'}

从代码中，咱们能够晓得：

只有有一个promise是被reject, Promise.all就会立刻回绝并返回雷同的谬误。
这就是疾速失败。

模仿源码实现

async function myPromiseAll (arr) {  const resultArr = [];  for (let i = 0; i < arr.length; i ++) {    try {      const data = await arr[i];      resultArr.push(data); // promise被reaolve, push 到 resultArr中    } catch (e) {      throw e; // 只有有一个被reject（就是触发谬误）, 马上抛出谬误    }  }  return resultArr;}

小结：

Promise.all([...]) 是一个有用的辅助函数，它容许您应用疾速失败策略中，并行执行异步操作，并将后果聚合到一个数组中。

动下小手

欢送关注我的GitHub：@huangyangquang ⭐⭐
欢送关注我的公众号：前端学长Joshua
<img src="http://qvf3q8r5e.hn-bkt.clouddn.com/wechatQrCode.jpg" width="50%">