Promise.all、any、race和allSettled的相同点与不同点与应用场景

在JavaScript中，Promise对象是一种处理异步操作的方式。它允许我们以一种更优雅的方式来处理异步代码，而不是使用回调函数。在Promise中，有一些方法可以帮助我们更好地管理多个Promise实例，这些方法包括Promise.all、Promise.any、Promise.race和Promise.allSettled。在这篇文章中，我们将探讨这些方法之间的相同点和不同点，并了解它们的应用场景。

相同点：

1. 传入参数和处理对象
   这些方法都接受一个可迭代的对象作为参数，这个对象中的每个元素都是一个Promise实例。此外，它们都针对的是多个Promise场景。

2. 应用场景
   假设是两个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时更加灵活和高效。理解它们之间的区别以及如何正确地应用它们，可以使我们的代码更加健壮和易于维护。