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

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

什么是并发处理?

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

使用 Promise.all 进行并发处理

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 假设我们有一个函数可以获取用户信息
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。

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// 假设有一个可能会失败的获取用户信息的函数
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.allPromise.allSettled 的用法。掌握这些技术将有助于提高应用程序的响应能力和用户体验。

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

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

https://zglg.work/typescript-zero/32/

作者

AI免费学习网(郭震)

发布于

2024-09-14

更新于

2024-09-14

许可协议

分享转发

交流

更多教程加公众号

更多教程加公众号

加入星球获取PDF

加入星球获取PDF

打卡评论