参考资料:
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
ES2020中,JavaScript提供了一个新语法Promise.allSettled。
无论参数实例是否reject,最终Promise.allSettled内部都会resolve,只不过会添加一个状态status来记录对应的参数实例是否执行成功。我们可以依据这个状态去过滤掉rejected的数据,只操作fulfilled的数据,就会得到我们想要的业务逻辑了。
标签:搞清楚,log,err,console,values,catch,Promise,异常 From: https://www.cnblogs.com/wuyinghong/p/16922946.html