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构建项目,讨论项目结构与配置文件,为实际开发打下基础。如果你在本章中有任何疑问,欢迎随时提问!