一、作用及基本用法
1、Promise.all用于将多个Promise实例包装成一个新的Promise实例。
2、当所有的Promise实例都成功时新的Promise实例才会成功，其中任意一个Promise实例失败，新的Promise实例就会失败。此时Promise.all返回的Promise实例的值是第一个失败Promise实例的错误信息。
3、基本用法如下所示：
const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
const promise3 = Promise.resolve(3);
Promise.all([promise1, promise2, promise3]).then((values) => {
console.log(values); // [1, 2, 3]
});
二、Promise.all实现并发执行
1、Promise.all可以实现并发执行，提高了程序的性能，如下所示：
// 顺序执行
function sequential() {
Promise.resolve(1)
.then(console.log)
.then(() => Promise.resolve(2).then(console.log))
.then(() => Promise.resolve(3).then(console.log));
}
// 并发执行
function concurrent() {
Promise.all([Promise.resolve(1), Promise.resolve(2), Promise.resolve(3)])
.then(console.log);
}
sequential(); // 1 2 3
concurrent(); // 1 2 3
2、在并发执行的过程中，Promise.all会同时执行所有的Promise实例，等待所有Promise实例都完成后再返回结果。
三、Promise.all处理异步请求
1、Promise.all可以优雅地处理多个异步请求，如下所示：
async function getUsers() {
const userIds = await fetch('/users');
const usersPromises = userIds.map(id => fetch(`/user/${id}`));
const users = await Promise.all(usersPromises);
return users;
}
2、在上面的例子中，首先从服务器获取所有用户的ID，接着通过map方法将所有的用户ID转化为一个个异步请求，并将这些请求的Promise实例存储在一个数组中。最后，使用Promise.all同时发起所有异步请求，等待所有请求完成后再将结果返回。
四、Promise.all陷阱及避免方式
1、Promise.all可能陷入死等待，如果其中一个异步请求没有响应，Promise.all会一直处于等待状态而无法返回结果。
2、避免方式如下：
Promise.all(promises.map(p => p.catch(() => undefined)))
.then(results => {
// 处理结果
});
3、在上面的例子中，通过在每个Promise实例后面添加一个catch方法，将错误值变成undefined，确保了Promise.all会在所有异步请求完成后返回结果。当然，这个方式会隐藏Promise实例的错误信息，如需要获取错误信息需要注意。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/289222.html
微信扫一扫 
支付宝扫一扫 