在前端开发中，异步操作是非常常见的。在处理异步操作时，我们经常需要将多个异步操作结果合并处理。ES6 中引入了 Promise.all() 方法，可以将多个 Promise 对象合并，等待所有 Promise 对象都完成后，再进行下一步操作。但是，如果其中一个 Promise 对象出现错误，整个合并操作就会失败。ES11 中引入了 Promise.allSettled() 方法，可以完美解决这个问题。本文将介绍 Promise.allSettled() 方法的应用和使用技巧。
Promise.allSettled() 方法的介绍
Promise.allSettled() 方法接收一个 Promise 对象数组作为参数，返回一个 Promise 对象。该 Promise 对象在所有 Promise 对象都完成后，会调用 then() 方法，并传入一个数组作为参数。这个数组包含了所有 Promise 对象的状态和结果，不管 Promise 对象是成功还是失败。
Promise.allSettled() 方法的语法如下：
Promise.allSettled(iterable)
其中，iterable 是一个可迭代对象，例如数组或字符串。
Promise.allSettled() 方法的使用
Promise.allSettled() 方法的使用非常简单。我们可以将多个 Promise 对象放在一个数组中，然后使用 Promise.allSettled() 方法进行合并。例如，我们有三个异步操作：
// www.javascriptcn.com code example
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Promise1 resolved');
}, 1000);
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Promise2 resolved');
}, 2000);
});
const promise3 = new Promise((resolve, reject) => {
setTimeout(() => {
reject('Promise3 rejected');
}, 3000);
});我们可以使用 Promise.allSettled() 方法将它们合并：
Promise.allSettled([promise1, promise2, promise3])
.then((results) => {
console.log(results);
});在上面的代码中，我们将三个 Promise 对象放在一个数组中，然后使用 Promise.allSettled() 方法进行合并。在 then() 方法中，我们打印了 results 数组，它包含了三个 Promise 对象的状态和结果。在本例中，results 的值为：
[
{ status: 'fulfilled', value: 'Promise1 resolved' },
{ status: 'fulfilled', value: 'Promise2 resolved' },
{ status: 'rejected', reason: 'Promise3 rejected' }
]在 results 数组中，每个元素都是一个对象，包含了 Promise 对象的状态和结果。如果 Promise 对象成功，它的状态为 fulfilled，结果保存在 value 属性中；如果 Promise 对象失败，它的状态为 rejected，原因保存在 reason 属性中。
Promise.allSettled() 方法的应用
在实际开发中，Promise.allSettled() 方法有很多应用场景。下面介绍其中两个。
1. 合并多个请求结果
在前端开发中，我们经常需要向服务器发送多个请求，然后将它们的结果合并处理。使用 Promise.allSettled() 方法可以很方便地实现这个功能。例如，我们需要向服务器发送三个请求：
const request1 = fetch('/api/data1');
const request2 = fetch('/api/data2');
const request3 = fetch('/api/data3');我们可以使用 Promise.allSettled() 方法将它们合并：
Promise.allSettled([request1, request2, request3])
.then((results) => {
// 处理请求结果
});在 then() 方法中，我们可以处理所有请求的结果。由于 Promise.allSettled() 方法返回的 Promise 对象包含了所有请求的结果，所以即使其中一个请求失败，我们仍然可以处理其他请求的结果。
2. 处理多个异步操作
在前端开发中，我们经常需要处理多个异步操作，例如读取文件、发送请求等。使用 Promise.allSettled() 方法可以很方便地处理这些操作。例如，我们需要读取两个文件：
const file1 = readFile('/path/to/file1');
const file2 = readFile('/path/to/file2');我们可以使用 Promise.allSettled() 方法将它们合并：
Promise.allSettled([file1, file2])
.then((results) => {
// 处理文件内容
});在 then() 方法中，我们可以处理所有文件的内容。由于 Promise.allSettled() 方法返回的 Promise 对象包含了所有文件的内容，所以即使其中一个文件读取失败，我们仍然可以处理其他文件的内容。
结语
本文介绍了 ES11 中 Promise.allSettled() 方法的应用和使用技巧。Promise.allSettled() 方法可以很方便地处理多个异步操作的结果，避免了 Promise.all() 方法中的失败问题。在实际开发中，我们可以根据需要使用 Promise.allSettled() 方法来处理异步操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d53a69a941bf71349aa902