32 异步编程与Promise ⏳之并发处理多个Promise

在上节中，我们学习了如何处理Promise 的错误。接下来，我们将深入讨论如何并发处理多个Promise，这在现代JavaScript编程中非常重要，特别是在处理异步操作时。

什么是并发处理？

并发处理意味着同时启动多个异步操作并等待它们全部完成。在TypeScript中，我们通常使用Promise来处理这些异步操作。通过并发处理，我们可以提高应用程序的性能，尤其是在网络请求、文件读取等IO密集型操作中。

使用 Promise.all 进行并发处理

Promise.all 方法可以将多个Promise实例包装成一个单一的Promise。当所有Promise都成功 resolved 时，它返回一个包含所有结果的数组；如果其中任意一个Promise被 rejected，整个Promise将被 rejected。

示例：并发获取多个用户信息

假设我们需要从多个API获取用户信息。我们可以使用 Promise.all 来并发处理这些请求。

// 假设我们有一个函数可以获取用户信息
function fetchUserData(userId: number): Promise<{id: number; name: string}> {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve({ id: userId, name: `User ${userId}` });
        }, 1000); // 模拟网络延时
    });
}

// 获取多个用户的信息
async function getUsersInfo(userIds: number[]): Promise<{id: number; name: string}[]> {
    const promises = userIds.map(id => fetchUserData(id));
    const users = await Promise.all(promises);
    return users;
}

// 使用
getUsersInfo([1, 2, 3]).then(users => {
    console.log(users); // 输出 [{id: 1, name: 'User 1'}, {id: 2, name: 'User 2'}, {id: 3, name: 'User 3'}]
});

在这个示例中，fetchUserData 函数模拟一个API调用，我们使用 Promise.all 并发获取了多个用户的信息。

使用 Promise.allSettled 来处理多个Promise

有时候我们希望获取所有Promise的结果，而不管它们的成功或失败情况。这时可以使用 Promise.allSettled。它返回一个包含所有Promise结果的数组，不论它们是resolved还是rejected。

示例：并发处理并获取结果

继续使用之前的用户数据获取的例子，但现在我们考虑一些可能会失败的情况。

// 假设有一个可能会失败的获取用户信息的函数
function fetchUserDataWithError(userId: number): Promise<{id: number; name: string}> {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (userId === 2) {
                reject(new Error(`User ${userId} not found`)); // 模拟失败
            } else {
                resolve({ id: userId, name: `User ${userId}` });
            }
        }, 1000);
    });
}

// 获取多个用户的信息并处理结果
async function getUsersInfoWithErrorHandling(userIds: number[]): Promise<void> {
    const promises = userIds.map(id => fetchUserDataWithError(id));
    const results = await Promise.allSettled(promises);
    
    results.forEach((result, index) => {
        if (result.status === 'fulfilled') {
            console.log(`User Info: ${JSON.stringify(result.value)}`);
        } else {
            console.error(`Error fetching user ${userIds[index]}: ${result.reason}`);
        }
    });
}

// 使用
getUsersInfoWithErrorHandling([1, 2, 3]);
// 输出：
// User Info: {"id":1,"name":"User 1"}
// Error fetching user 2: Error: User 2 not found
// User Info: {"id":3,"name":"User 3"}

在这个示例中，fetchUserDataWithError 函数模拟了一个可能失败的API调用。在处理 Promise.allSettled 的结果中，我们可以分别处理成功和失败的情况。

小结

在本章中，我们探讨了如何并发处理多个Promise，学习了 Promise.all 和 Promise.allSettled 的用法。掌握这些技术将有助于提高应用程序的响应能力和用户体验。

在下一章中，我们将使用TypeScript构建项目，讨论项目结构与配置文件，为实际开发打下基础。如果你在本章中有任何疑问，欢迎随时提问！