今天我们学习使用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(),明天见。
如果文章有帮助,微信搜索【小帅的编程笔记】,跟着我每天进步一点点