JavaScript Promise.all()

今天我们学习使用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()，明天见。