在JavaScript中，Promise对象是一种处理异步操作的方式。它允许我们以一种更优雅的方式来处理异步代码，而不是使用回调函数。在Promise中，有一些方法可以帮助我们更好地管理多个Promise实例，这些方法包括Promise.all、Promise.any、Promise.race和Promise.allSettled。在这篇文章中，我们将探讨这些方法之间的相同点和不同点，并了解它们的应用场景。
相同点：
传入参数和处理对象
这些方法都接受一个可迭代的对象作为参数，这个对象中的每个元素都是一个Promise实例。此外，它们都针对的是多个Promise场景。应用场景
假设是两个Promise。成功成功时，可以使用all any race allSettled；成功失败时，也可以使用any race allSettled；失败成功时，可以使用any race allSettled；失败失败时，则可以使用race allSettled。
不同点：
处理结果和处理时机
Promise.all
所有成功才返回数组。如果任何一个Promise失败，那么整个Promise链将立即终止并返回错误原因。Promise.any
只要有一个成功就返回。如果所有Promise都失败，那么整个Promise链将返回第一个错误原因。Promise.race
谁先执行，就返回。这意味着只要其中一个Promise完成（无论是成功还是失败），整个Promise链就会结束并返回相应的结果或错误原因。Promise.allSettled
所有执行完毕后才返回。无论成功还是失败，都会返回一个包含所有Promise状态和值/原因的对象数组。
返回值
Promise.all
成功时返回一个包含所有成功值的数组，失败时返回一个包含错误原因的reason。Promise.any
成功时返回一个包含任意一个成功值的values，没有No；失败时返回一个包含第一个错误原因的reason。Promise.race
成功时返回一个包含第一个成功值的values，失败时返回一个包含第一个错误原因的reason。Promise.allSettled
返回一个包含所有Promise状态和值/原因的对象数组，格式为[{status:, value:}, {status:, reason:}]。
应用场景：
Promise.all 示例 —— 等待所有成功
当你的应用需要同时加载多个资源，且所有资源都必须加载完成才能进行下一步操作时，Promise.all是一个理想的选择。例如，在加载页面前，你可能需要确保所有CSS和JS文件都已下载。
- 假设你正在开发一个应用程序，需要同时从多个API端点获取数据。只有当所有请求都成功时，你才开始处理数据。
const fetchUserData = () => new Promise((resolve, reject) => {
setTimeout(() => resolve({ name: 'Alice', age: 25 }), 1000);
});
const fetchUserPosts = () => new Promise((resolve, reject) => {
setTimeout(() => resolve(['Post 1', 'Post 2']), 1500);
});
const fetchUserComments = () => new Promise((resolve, reject) => {
setTimeout(() => resolve(['Comment 1', 'Comment 2']), 2000);
});
Promise.all([fetchUserData(), fetchUserPosts(), fetchUserComments()])
.then(values => {
const [userData, userPosts, userComments] = values;
console.log('User data:', userData);
console.log('User posts:', userPosts);
console.log('User comments:', userComments);
})
.catch(reason => {
console.error('Failed to load data:', reason);
});
Promise.any 示例 —— 只要有成功
在需要从多个来源获取数据的情况下，如使用多个CDN加载相同的资源，你可能只关心至少有一个来源成功。Promise.any可以确保只要有一个请求成功，你的应用就能继续运行。
- 在这个例子中，我们尝试从三个不同的服务器获取相同的数据，只要其中一个服务器响应，我们就认为请求成功。
const fetchFromServerA = () => new Promise((resolve, reject) => {
setTimeout(() => Math.random() > 0.5 ? resolve('Data from Server A') : reject(new Error('Failed')), 1000);
});
const fetchFromServerB = () => new Promise((resolve, reject) => {
setTimeout(() => Math.random() > 0.5 ? resolve('Data from Server B') : reject(new Error('Failed')), 1500);
});
const fetchFromServerC = () => new Promise((resolve, reject) => {
setTimeout(() => Math.random() > 0.5 ? resolve('Data from Server C') : reject(new Error('Failed')), 2000);
});
Promise.any([fetchFromServerA(), fetchFromServerB(), fetchFromServerC()])
.then(value => {
console.log('Received data:', value);
})
.catch(reason => {
console.error('All requests failed:', reason);
});
Promise.race 示例 —— 谁快谁赢
Promise.race适用于那些需要快速响应的场景，比如设置请求超时。如果你有一个主要的请求和一个备用请求，你可以使用Promise.race来确保无论哪个请求先完成，你都可以立即得到结果。
- 这里我们使用
Promise.race来实现一个请求超时的功能。如果主请求在规定时间内没有完成，我们将取消它并使用默认值。
const mainRequest = () => new Promise((resolve, reject) => {
setTimeout(() => resolve('Main Request Data'), 2500);
});
const defaultRequest = () => new Promise((resolve, reject) => {
setTimeout(() => resolve('Default Request Data'), 1000);
});
Promise.race([mainRequest(), defaultRequest()])
.then(value => {
console.log('Data received:', value);
})
.catch(reason => {
console.error('Request failed:', reason);
});
Promise.allSettled 示例 —— 全盘接收
当你不仅关心所有请求的结果，而且还需要知道哪些请求成功了，哪些失败了，Promise.allSettled就派上用场了。它会返回一个包含了所有请求结果（无论成功还是失败）的数组，每个元素都携带了状态信息。
- 这个例子中，我们想要确保我们能够收集到所有请求的结果，无论它们是否成功。
const requestA = () => new Promise((resolve, reject) => {
setTimeout(() => Math.random() > 0.5 ? resolve('Data from A') : reject(new Error('Failed')), 1000);
});
const requestB = () => new Promise((resolve, reject) => {
setTimeout(() => Math.random() > 0.5 ? resolve('Data from B') : reject(new Error('Failed')), 1500);
});
const requestC = () => new Promise((resolve, reject) => {
setTimeout(() => Math.random() > 0.5 ? resolve('Data from C') : reject(new Error('Failed')), 2000);
});
Promise.allSettled([requestA(), requestB(), requestC()])
.then(results => {
results.forEach(result => {
if (result.status === 'fulfilled') {
console.log('Success:', result.value);
} else {
console.log('Failure:', result.reason);
}
});
});
以上代码示例展示了如何在不同的场景下使用这四个Promise方法。请注意，为了简化示例，我使用了
setTimeout来模拟异步请求，实际应用中你可能会使用fetch或类似的HTTP请求库。
总结
总结来说，Promise.all、any、race和allSettled都是非常有用的工具，可以帮助我们在处理多个Promise时更加灵活和高效。理解它们之间的区别以及如何正确地应用它们，可以使我们的代码更加健壮和易于维护。
