在编写前端代码时，我们经常会使用异步操作来处理一些需要等待的任务，比如网络请求、文件读取等。而在 JavaScript 中，我们通常使用 async/await 来处理异步操作，让代码更加简洁易懂。
但是，在使用 async/await 时，我们也会遇到一些问题，比如当我们需要同时处理多个异步操作时，如果其中一个操作出现错误，整个程序就会停止执行。另外，如果我们需要等待多个异步操作全部完成后再执行后续操作，也需要一些额外的处理。
在 ECMAScript 2019 中，新增了 Promise.allSettled 方法，可以帮助我们解决这些问题。
Promise.allSettled 方法简介
Promise.allSettled 方法可以接收一个 Promise 数组作为参数，返回一个新的 Promise，该 Promise 在所有传入的 Promise 都被解决或拒绝后才会被解决。解决后的值是一个对象数组，每个对象包含一个 Promise 的状态信息，包括状态（fulfilled 或 rejected）和结果（如果状态为 fulfilled，则包含 Promise 的解决值；如果状态为 rejected，则包含 Promise 的拒绝原因）。
下面是 Promise.allSettled 方法的使用示例：
// javascriptcn.com 代码示例
const promises = [
Promise.resolve(1),
Promise.reject('error'),
Promise.resolve(3)
];
Promise.allSettled(promises)
.then(results => {
console.log(results);
});输出结果为：
[
{ status: 'fulfilled', value: 1 },
{ status: 'rejected', reason: 'error' },
{ status: 'fulfilled', value: 3 }
]Promise.allSettled 方法的应用
解决 async/await 中的错误问题
在使用 async/await 处理多个异步操作时，如果其中一个操作出现错误，整个程序就会停止执行。这时，我们可以使用 Promise.allSettled 方法来解决这个问题。
下面是一个使用 async/await 处理多个异步操作的示例代码：
async function fetchData() {
const data1 = await fetch('/api/data1');
const data2 = await fetch('/api/data2');
const data3 = await fetch('/api/data3');
return [data1, data2, data3];
}如果其中一个 fetch 请求出现错误，整个程序就会停止执行。这时，我们可以将每个 fetch 请求用 Promise 封装起来，然后使用 Promise.allSettled 方法来处理所有的 Promise。
下面是一个使用 Promise.allSettled 方法处理多个异步操作的示例代码：
// javascriptcn.com 代码示例
async function fetchData() {
const promises = [
fetch('/api/data1'),
fetch('/api/data2'),
fetch('/api/data3')
];
const results = await Promise.allSettled(promises);
const data = results.filter(result => result.status === 'fulfilled')
.map(result => result.value);
return data;
}这样，即使其中一个 fetch 请求出现错误，也不会影响其他请求的执行。
解决 async/await 中的延迟问题
在使用 async/await 处理多个异步操作时，如果需要等待多个异步操作全部完成后再执行后续操作，我们需要使用 Promise.all 方法。但是，Promise.all 方法会等待所有 Promise 都被解决后才会执行后续操作，如果其中一个 Promise 被拒绝，整个程序就会停止执行。
这时，我们可以使用 Promise.allSettled 方法来解决这个问题。
下面是一个使用 Promise.all 方法处理多个异步操作的示例代码：
// javascriptcn.com 代码示例
async function fetchData() {
const data1 = fetch('/api/data1');
const data2 = fetch('/api/data2');
const data3 = fetch('/api/data3');
const [result1, result2, result3] = await Promise.all([data1, data2, data3]);
return [result1, result2, result3];
}如果其中一个 fetch 请求被拒绝，整个程序就会停止执行。这时，我们可以将每个 fetch 请求用 Promise 封装起来，然后使用 Promise.allSettled 方法来处理所有的 Promise。
下面是一个使用 Promise.allSettled 方法处理多个异步操作的示例代码：
// javascriptcn.com 代码示例
async function fetchData() {
const promises = [
fetch('/api/data1'),
fetch('/api/data2'),
fetch('/api/data3')
];
const results = await Promise.allSettled(promises);
const data = results.filter(result => result.status === 'fulfilled')
.map(result => result.value);
return data;
}这样，即使其中一个 fetch 请求被拒绝，也不会影响其他请求的执行。
总结
Promise.allSettled 方法是 ECMAScript 2019 中新增的一个方法，可以帮助我们解决 async/await 中的错误及延迟问题。在使用 async/await 处理多个异步操作时，如果其中一个操作出现错误，我们可以使用 Promise.allSettled 方法来处理所有的 Promise；如果需要等待多个异步操作全部完成后再执行后续操作，我们也可以使用 Promise.allSettled 方法来解决这个问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657e67d4d2f5e1655d93c717