关于前端:技术篇-如何使用-Promiseall

33次阅读

共计 2403 个字符,预计需要花费 7 分钟才能阅读完成。

如何应用 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 的解决形式。

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

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

  1. 并行
  2. 聚合后果
  3. 疾速失败

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

在进入例子之前,咱们先来写两个辅助函数:
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 second
console.log(lists); 
// [['potatoes', 'tomatoes'], ['oranges', 'apples']]

从代码中,咱们能够晓得:

  1. promises 数组的程序就是聚合后果的程序。
  2. 所有 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!'
}

从代码中,咱们能够晓得:

  1. 只有有一个 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%”>

正文完
 0