搞清楚Promise.all的异常处理

2,548 阅读2分钟

参考资料:

www.jianshu.com/p/356f10ee4… blog.csdn.net/aaqingying/… www.cnblogs.com/hill-foryou…

背景:
很多情况下,一个页面需要异步请求多个接口,这个时候可以使用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);
});

上面代码的执行情况
image.png

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的数据,就会得到我们想要的业务逻辑了。