如何使用 Promise.all()

Promise 在处理异步操作时很有用。

JavaScript 提供了一个辅助函数Promise.all(promisesArrayOrIterable)来同时并行处理多个 promise,并在单个聚合数组中获取结果。让我们看看它是如何工作的。

1. Promise.all()

Promise.all() 接受一组 promises(或通常是一个可迭代的)。该函数返回一个 promise:

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

然后您可以使用 then-able 语法提取 Promise 解析的值:

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
}

2. 所有的 Promise fulfilled

为了研究如何 Promise.all() 工作,我将使用 2 个助手 –resolveTimeout(value, delay)rejectTimeout(reason, delay)

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)
  );
}

resolveTimeout(value, delay)在经过delay时间后返回一个value的 Promise 。

另一方面,rejectTimeout(reason, delay)在经过delay时间后返回 reject 的 Promise(通常是一个错误)。

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']]

promises 数组的顺序直接影响结果的顺序。

3. 一个 Promise rejects

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.all([...])被命名为fail-fast。如果 promises 数组中至少有一个 promise 拒绝,则allPromise = Promise.all([...])rejects返回的promise也会被拒绝。

4. 结论

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

本文作者: 费多夫

文章来源:javascript公众号

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 如何使用 Promise.all()

发表评论

前端开发相关广告投放 更专业 更精准

立即查看 联系我们