在前端开发中，异步编程是必不可少的技能。为了解决回调地狱和异步操作的顺序问题，ES6 引入了 Promise 对象。Promise 对象可以将异步操作封装成一个对象，可以更加优雅和可读的处理异步操作。
在 ECMAScript 2020（ES11）中，Promise.allSettled 方法被引入，它可以解决 Promise.all 方法的一些局限性，提供了更加灵活的异步编程方案。本文将介绍 Promise.allSettled 的用法和应用场景，并提供示例代码。
Promise.all 方法的局限性
Promise.all 方法可以将多个 Promise 对象封装成一个新的 Promise 对象，当所有的 Promise 对象都成功时，这个新的 Promise 对象才算成功；当其中一个 Promise 对象失败时，这个新的 Promise 对象就算失败。
例如，下面的代码将两个异步操作封装成 Promise 对象，并通过 Promise.all 方法将它们合并成一个新的 Promise 对象：
// javascriptcn.com 代码示例
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('promise1');
}, 1000);
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
reject('promise2');
}, 2000);
});
Promise.all([promise1, promise2])
.then(([result1, result2]) => {
console.log(result1, result2);
})
.catch(error => {
console.log(error);
});在上面的代码中，promise1 会在 1 秒后返回成功结果，promise2 会在 2 秒后返回失败结果。由于 Promise.all 方法会等待所有的 Promise 对象都返回结果后再返回新的 Promise 对象，所以在 2 秒后，Promise.all 方法会返回一个失败结果，结果为 'promise2'。
但是，Promise.all 方法有一个局限性，即只要有一个 Promise 对象失败，就会立即返回失败结果。这个限制在某些场景下是不够灵活的，例如，我们需要同时处理多个异步操作，但不希望失败的操作影响其他操作的结果。
Promise.allSettled 方法的用法和应用场景
Promise.allSettled 方法是一个新的方法，它可以将多个 Promise 对象封装成一个新的 Promise 对象，当所有的 Promise 对象都返回结果时，这个新的 Promise 对象才算成功，不管每个 Promise 对象返回的结果是成功还是失败，都会被放在一个数组中返回。
例如，下面的代码将两个异步操作封装成 Promise 对象，并通过 Promise.allSettled 方法将它们合并成一个新的 Promise 对象：
// javascriptcn.com 代码示例
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('promise1');
}, 1000);
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
reject('promise2');
}, 2000);
});
Promise.allSettled([promise1, promise2])
.then(results => {
console.log(results);
});在上面的代码中，promise1 会在 1 秒后返回成功结果，promise2 会在 2 秒后返回失败结果。由于 Promise.allSettled 方法会等待所有的 Promise 对象都返回结果后再返回新的 Promise 对象，所以在 2 秒后，Promise.allSettled 方法会返回一个成功结果，结果为：
[
{ status: 'fulfilled', value: 'promise1' },
{ status: 'rejected', reason: 'promise2' }
]可以看到，每个 Promise 对象的结果都被放在一个对象中，对象中包含了结果的状态（'fulfilled' 或 'rejected'）和结果本身（value 或 reason）。这样就可以更加灵活的处理异步操作的结果，不管成功还是失败，都可以被处理。
Promise.allSettled 方法的应用场景很广泛，例如：
- 处理多个异步操作，并对每个操作的结果进行处理。
- 不希望失败的操作影响其他操作的结果。
- 需要等待所有的异步操作都完成后再进行下一步操作。
示例代码
下面的代码演示了 Promise.allSettled 方法的用法和应用场景：
// javascriptcn.com 代码示例
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('promise1');
}, 1000);
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
reject('promise2');
}, 2000);
});
const promise3 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('promise3');
}, 3000);
});
Promise.allSettled([promise1, promise2, promise3])
.then(results => {
console.log(results);
const fulfilledResults = results.filter(result => result.status === 'fulfilled').map(result => result.value);
console.log(fulfilledResults);
const rejectedResults = results.filter(result => result.status === 'rejected').map(result => result.reason);
console.log(rejectedResults);
});在上面的代码中，promise1 会在 1 秒后返回成功结果，promise2 会在 2 秒后返回失败结果，promise3 会在 3 秒后返回成功结果。由于 Promise.allSettled 方法会等待所有的 Promise 对象都返回结果后再返回新的 Promise 对象，所以在 3 秒后，Promise.allSettled 方法会返回一个成功结果，结果为：
[
{ status: 'fulfilled', value: 'promise1' },
{ status: 'rejected', reason: 'promise2' },
{ status: 'fulfilled', value: 'promise3' }
]可以看到，每个 Promise 对象的结果都被放在一个对象中，对象中包含了结果的状态（'fulfilled' 或 'rejected'）和结果本身（value 或 reason）。我们可以通过 filter 和 map 方法对结果进行处理，例如，将所有成功的结果放在一个数组中，将所有失败的结果放在另一个数组中。
总结
Promise.allSettled 方法是 ECMAScript 2020（ES11）中引入的新方法，它可以将多个 Promise 对象封装成一个新的 Promise 对象，当所有的 Promise 对象都返回结果时，这个新的 Promise 对象才算成功，不管每个 Promise 对象返回的结果是成功还是失败，都会被放在一个数组中返回。Promise.allSettled 方法的应用场景很广泛，在处理多个异步操作时非常有用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6587e5f4eb4cecbf2dd19220