JavaScript Promise.all()

2022-04-17 18:33:11 阅读：178 来源： 互联网

标签：resolve console log JavaScript promise reject Promise

今天我们学习使用Promise.all()这个静态方法来聚合多个异步任务的结果。

Promise.all()函数接受一个具有多个promise的数组作为参数，并返回一个promise对象。

什么时候返回？

当数组中的所有Promise全部被resolve或者reject

Promise.all的语法：

Promise.all([promise1, promise2, promise3])
  .then(console.log)
  .catch(console.log)

首先传入一个数组，数组中的每个值为promise对象。

如果数组中的每个promise都被resolve，则Promise.all会返回一个新的promise对象，并reslove一个数组，里面是每个promise返回的值，同样按照传入的顺序。

如果数组中的某个promise被reject，Promise.all也会返回新的promise对象，reject第一个失败的promise所返回的值，如果后面的promise也有失败也不会返回。

当我们处理同时多个异步请求的时候，Promise.all非常的有用。

Promise.all() 示例代码

看明白代码就会了

成功resolve Promise示例
下面的3个promise分别在第1、2、3秒的时候成功返回数字10、20、30。我们用setTimeout来模拟异步操作。

我需要将这个3个promise所返回的结果进行计算总和。

如果使用昨天的链式调用的话，结果将在1+2+3，6秒后才能返回结果。

但今天我们使用Promise.all，同时处理3个异步操作，最长时间的是p3的promise，所以3秒后就可以计算出结果。

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('第一个promise被resolve');
    resolve(10);
  }, 1 * 1000);

});
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('第二个promise被resolve');
    resolve(20);
  }, 2 * 1000);
});
const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('第三个promise被resolve');
    resolve(30);
  }, 3 * 1000);
});

Promise.all([p1, p2, p3])
  .then(results => {
  const total = results.reduce((p, c) => p + c);
  console.log(`返回结果: ${results}`);
  console.log(`计算总数: ${total}`);
});

// 输出：
// 第一个promise被resolve
// 第二个promise被resolve
// 第三个promise被resolve
// 返回结果: 10,20,30
// 计算总数: 60

当所有的promise被resolve时，Promise.all的 then 会被调用，results 为p1,p2,p3 结果组成的数组。

最后使用reduce方法求10+20+30的结果。

失败reject Promise示例

有成功就会有失败，下面来看看如果有失败的异步操作怎么办

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('第一个promise被resolve');
    resolve(10);
  }, 1 * 1000);

});
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('第二个promise被reject');
    reject('失败');
  }, 2 * 1000);
});
const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('第三个promise被resolve');
    resolve(30);
  }, 3 * 1000);
});


Promise.all([p1, p2, p3])
  .then(console.log)
  .catch(console.log);

// 输出：
// 第一个promise被resolve
// 第二个promise被reject
// 失败
// 第三个promise被resolve

这个例子中，p1在1秒后成功返回，p2在2秒后失败，p3在3秒后成功返回。

再看Promise.all，catch方法执行并打印出p2的reject返回值，因为promise中有失败，所以then方法并不会执行。

如果p3也失败呢？

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('第一个promise被resolve');
    resolve(10);
  }, 1 * 1000);

});
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('第二个promise被reject');
    reject('p2失败');
  }, 2 * 1000);
});
const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('第三个promise被reject');
    reject('p3失败');
  }, 3 * 1000);
});


Promise.all([p1, p2, p3])
  .then(console.log)
  .catch(console.log);

// 输出：
// 第一个promise被resolve
// 第二个promise被reject
// p2失败
// 第三个promise被reject

可以看到结果还是相同，catch只打印了p2错误的值，并没有返回p3的reject的值，说明Promise.all的只会reject第一个失败的值，后面的失败返回并不会传入到catch中。

这在平时的使用中要注意，如果想要拿到所有的失败返回值，用reject是做不到。

好，今天的Promise.all学习笔记到这，明天讲讲Promise.race()，明天见。

标签：resolve,console,log,JavaScript,promise,reject,Promise
来源： https://www.cnblogs.com/huaan011/p/16156659.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JavaScript Promise.all()

Promise.all() 示例代码

失败reject Promise示例