用 Promise.allSettled 改善 JavaScript 异步处理
处理异步操作是 JavaScript 编程中的重要部分。随着程序变得越来越复杂，我们经常需要同时执行多个异步任务，并妥善处理它们的结果。过去，开发者主要使用 Promise.all() 方法来处理多个并发的 Promise，但这种方法有一个明显的缺点：只要有一个 Promise 失败，整个操作就会立即失败。
Promise.all 的限制
让我们先看看 Promise.all() 的工作方式和它的局限性：
const promises = [
fetch('/api/users'),
fetch('/api/products'),
fetch('/api/orders')
];
Promise.all(promises)
.then(results => {
// 处理所有成功的结果
const [users, products, orders] = results;
// 进一步处理数据
})
.catch(error => {
// 只要有一个 Promise 失败，就会执行这里
console.error('至少有一个请求失败:', error);
// 但我们不知道哪些请求成功了，哪些失败了
});这种方法存在几个问题：
只要有一个 Promise 失败，整个操作就会失败
无法知道哪些操作成功了，哪些失败了
即使大部分操作成功，也无法获取成功操作的结果
在实际开发中，我们通常希望即使某些操作失败，也能继续处理成功的结果。比如，在加载网页的不同部分时，即使某个部分的数据获取失败，我们也希望显示其他成功获取的部分。
Promise.allSettled 的解决方案
Promise.allSettled() 解决了上述所有问题。它会等待所有 Promise 完成，不管它们是成功还是失败，然后返回一个包含每个 Promise 结果的数组。
const promises = [
fetch('/api/users').then(r => r.json()),
fetch('/api/products').then(r => r.json()),
fetch('/api/orders').then(r => r.json())
];
Promise.allSettled(promises)
.then(results => {
results.forEach((result, index) => {
if (result.status === 'fulfilled') {
console.log(`Promise ${index} 成功:`, result.value);
} else {
console.log(`Promise ${index} 失败:`, result.reason);
}
});
// 处理所有成功的结果，同时知道哪些失败了
const successfulData = results
.filter(result => result.status === 'fulfilled')
.map(result => result.value);
// 处理成功获取的数据
processData(successfulData);
});理解 Promise.allSettled 的返回值
Promise.allSettled() 返回一个数组，每个元素对应一个 Promise 的结果，有两种可能的结构：
对于成功的 Promise：
{ status: 'fulfilled', value: 结果值 }对于失败的 Promise：
{ status: 'rejected', reason: 错误原因 }这种统一的结构让结果处理变得简单明了。
实际应用场景
Promise.allSettled 在许多实际场景中特别有用：
数据仪表板：当需要从多个独立数据源获取信息时，即使某些源暂时不可用，也能显示可用的数据。
批量操作：处理用户批量上传或删除操作时，即使部分操作失败，也能完成其他操作并向用户报告完整结果。
微服务架构：在由多个微服务组成的应用中，即使某些服务暂时不可用，也能保持核心功能的运行。
更复杂的示例
下面是一个更接近真实场景的例子：
// 模拟从不同服务获取数据
async function fetchUserData(userId) {
// 模拟API调用
return fetch(`/api/users/${userId}`);
}
async function fetchUserOrders(userId) {
return fetch(`/api/orders?user=${userId}`);
}
async function fetchUserPreferences(userId) {
return fetch(`/api/preferences/${userId}`);
}
// 使用 Promise.allSettled 获取用户完整信息
async function getUserFullProfile(userId) {
const promises = [
fetchUserData(userId),
fetchUserOrders(userId),
fetchUserPreferences(userId)
];
const results = await Promise.allSettled(promises);
const profile = {
userData: null,
orders: null,
preferences: null,
errors: []
};
results.forEach((result, index) => {
const operationNames = ['用户数据', '订单数据', '偏好设置'];
if (result.status === 'fulfilled') {
// 根据索引分配结果到对应的属性
if (index === 0) profile.userData = result.value;
else if (index === 1) profile.orders = result.value;
else if (index === 2) profile.preferences = result.value;
} else {
profile.errors.push({
operation: operationNames[index],
error: result.reason
});
}
});
return profile;
}
// 使用示例
getUserFullProfile(123)
.then(profile => {
console.log('用户档案:', profile);
// 即使某些数据获取失败，也能显示可用的部分
});兼容性考虑
Promise.allSettled 是 ES2020 标准的一部分。对于需要支持旧版浏览器的项目，可以使用 polyfill：
// 简单的 Promise.allSettled polyfill
if (!Promise.allSettled) {
Promise.allSettled = function(promises) {
return Promise.all(promises.map(p =>
Promise.resolve(p).then(
value => ({ status: 'fulfilled', value }),
reason => ({ status: 'rejected', reason })
)
));
};
}总结
Promise.allSettled 是 JavaScript 异步编程中的一个重要工具。它让我们能够构建更加健壮的应用，优雅地处理现实世界中不可避免的错误情况。与 Promise.all 不同，它不会因为单个失败而放弃所有结果，而是提供完整的执行情况报告。
当你需要同时执行多个独立的异步操作，并且希望了解每个操作的最终状态时，Promise.allSettled 是最合适的选择。它特别适合那些需要最大限度保持应用可用性的场景，即使部分功能暂时不可用。
掌握 Promise.allSettled 的使用，将帮助你编写更加可靠和用户友好的 JavaScript 应用程序。
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
