搞清楚Promise.all的异常处理

参考资料:
https://www.jianshu.com/p/356f10ee476d
https://blog.csdn.net/aaqingying/article/details/122966849
https://www.cnblogs.com/hill-foryou/p/12512885.html

背景：
很多情况下，一个页面需要异步请求多个接口，这个时候可以使用Promise.all并且发送请求。但是，Promise.all中的任何一个promise出现错误的时候都会执行catch，导致其他正常返回的数据无法使用。

Promise.all基本特性

• 接收一个 Promise 数组，执行结果返回一个新的 Promise
• 所有 Promise 都成功的时候，返回的 Promise 才是成功
• 要是有一个 Promise 失败，则返回的 Promise 是失败

Promise.all的基本使用

举个例子：

var p1 = Promise.resolve(1);
var p2 = Promise.resolve(2);
var p3 = new Promise((resolve, reject) => {
    setTimeout(resolve, 100, "3");
});

var p4 = Promise.reject(4);
var p5 = Promise.reject(5).catch((e) => e);

// 情况1：promise全部resolve
Promise.all([p1, p2, p3]).then(values => {
    console.log(values); // 其中p1、p2、p3都成功，所以进入then()
}).catch(function(err) {
    console.log(err); // 永远走不到这里
});

// 情况2：promise有一个reject，且reject没有主动捕获异常
Promise.all([p1, p2, p4]).then(values => {
    console.log(values); // 其中p4失败，且没有主动捕获p4异常，所以then()永远走不到这里
}).catch(function(err) {
    console.log(err); // 4
});

// 情况3：promise有一个reject，且reject主动捕获异常
Promise.all([p1, p2, p5]).then(values => {
    console.log(values); // 其中p5失败，但是主动捕获了p5的异常，所以进入then() [1,2,5]
}).catch(function(err) {
    console.log(err);
});

// 情况4：使用Promise.allSettled
Promise.allSettled([p1, p2, p4]).then(values => {
    console.log(values); // 其中p4失败，但是使用Promise.allSettled，所以进入then()返回一个带有对象数据新的Promise
}).catch(function(err) {
    console.log(err);
});

上面代码的执行情况

Promise.all 异常处理

1.主动对每个请求的catch做处理

主动对每个失败的promise请求的catch做处理，使其正常的请求能返回。

例如：var p5 = Promise.reject(5).catch((e) => e);

Promise.all[]返回来的values数组，即使该请求失败了，在values数组也会返回你主动catch返回来的内容，一般可以是接口请求的错误信息或者是设置为undefined，然后在业务代码中，根据values数组的值判断做不同处理。达到一个接口失败不影响其他接口返回结果的目的。

2.使用Promise.allSettled(iterable)方法

• 接收一个 Promise 数组，执行结果返回一个成功的 Promise
• 返回 Promise 状态为成功
• 返回 Promise 的值是一个数组

// 情况4：使用Promise.allSettled

Promise.allSettled([p1, p2, p4]).then(values => {

console.log(values); // 其中p4失败，但是使用Promise.allSettled，所以进入then()返回一个带有对象数据新的Promise

}).catch(function(err) {

console.log(err);

});

Promise.allSettled

MDN文档

ES2020中，JavaScript提供了一个新语法Promise.allSettled。

无论参数实例是否reject，最终Promise.allSettled内部都会resolve，只不过会添加一个状态status来记录对应的参数实例是否执行成功。我们可以依据这个状态去过滤掉rejected的数据，只操作fulfilled的数据，就会得到我们想要的业务逻辑了。