在前端开发过程中, 往往需要对多个异步请求进行处理, 而 Promise.allSettled 可以方便地用于处理多个异步请求, 并且返回所有结果。本文将详细介绍 Promise.allSettled 的使用, 并且提供示例代码。
Promise.allSettled 介绍
Promise.allSettled 是 Promise 中一个非常重要的方法, 它和 Promise.all 方法不同的是, 当所有promise对象状态为已完成或已失败时，它都会返回一个数组，该数组包含每个promise对象的结果（无论是否成功）而不是在一个promise集合中以同时方式返回。
Promise.allSettled 方法返回的数组中每一个成员都是对象，这个对象包含了状态是 'fulfilled' 或 'rejected' 的对象。
Promise.allSettled 方法可以在不关心每一个Promise 的执行结果是否成功，而仅仅关注每个Promise 是否已经执行完毕的场景中得到非常好的运用。
示例代码
下面给出一个示例, 来展示如何使用 Promise.allSettled 方法:
// www.javascriptcn.com code example
// 下面定义了三个异步请求
let promise1 = Promise.resolve('成功');
let promise2 = Promise.reject('失败');
let promise3 = new Promise((resolve) => setTimeout(() => resolve('成功'), 3000));
// 使用 Promise.allSettled 方法
Promise.allSettled([promise1, promise2, promise3]).then((result) => {
console.log(result);
});
// 输出:
// [
// { status: 'fulfilled', value: '成功' },
// { status: 'rejected', reason: '失败' },
// { status: 'fulfilled', value: '成功' }
// ]代码中, 先定义了三个异步请求 promise1, promise2 和 promise3, 分别都有不同的处理结果。可以看到, 当使用 Promise.allSettled 方法时，返回的数组包含了每个Promise的执行结果，无论成功或者失败，都会返回。
案例分析
在实际开发过程中，通常需要对多个接口进行请求，然后对返回结果进行汇总或者筛选。假设我们需要访问3个API接口，API1返回用户信息，API2返回订单信息，API3返回商品信息。
在传统的处理方法中, 通常使用三个Promise对象来分别执行访问3个API接口, 然后在所有结果返回后进行结果的整合操作:
// www.javascriptcn.com code example
let promise1 = fetch('/api/user');
let promise2 = fetch('/api/orders');
let promise3 = fetch('/api/products');
Promise.all([promise1, promise2, promise3]).then((results) => {
// results[0] 是用户信息结果，results[1] 是订单信息结果，results[2] 是商品信息结果
console.log(results[0]);
console.log(results[1]);
console.log(results[2]);
}).catch((e) => { console.log('错误:', e); });这种设计对于3个接口例子比较简单数量，如果要访问的接口多了，情况会变得越来越复杂。使用 Promise.allSettled 方法则简单得多，可以用一个 Promise.allSettled 方法执行多个 Promise，然后对每个 Promise 的结果进行统一处理。
// www.javascriptcn.com code example
let promise1 = fetch('/api/user');
let promise2 = fetch('/api/orders');
let promise3 = fetch('/api/products');
Promise.allSettled([promise1, promise2, promise3]).then((results) => {
let users = [], orders = [], products = [];
for (let i = 0; i < results.length; i++) {
if (results[i].status === 'fulfilled') {
if (i === 0) {
users = results[i].value;
} else if (i === 1) {
orders = results[i].value;
} else if (i === 2) {
products = results[i].value;
}
}
}
console.log(users);
console.log(orders);
console.log(products);
}).catch((e) => {
console.log('错误:', e);
});以上代码采用 Promise.allSettled 方法执行多个 Promise，然后通过解析 Promise 返回的结果集合，对每个 Promise 的处理结果进行统一的处理。
总结
本文介绍了 Promise.allSettled 方法在前端开发中的应用, 可以方便地处理多个异步请求，并且返回所有结果。在实际开发中, 可以大大地提高开发效率。同时, 本文提供了使用示例代码，并且对示例代码进行了详细分析，希望对读者有所帮助。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/64a413e248841e9894081b35