TypeScript Promise组合

在现代JavaScript和TypeScript中，异步编程是不可或缺的一部分。Promise是处理异步操作的核心工具之一。然而，当我们需要处理多个异步操作时，如何有效地组合这些Promise就变得尤为重要。本文将详细介绍如何在TypeScript中使用Promise组合，并通过实际案例展示其应用场景。

什么是Promise组合？

Promise组合是指将多个Promise操作串联或并联起来，以便更高效地处理异步任务。通过组合Promise，我们可以避免回调地狱（Callback Hell），并编写出更具可读性和可维护性的代码。

常见的Promise组合方法

在TypeScript中，常见的Promise组合方法包括：

Promise.all: 并行执行多个Promise，并在所有Promise都完成后返回结果。
Promise.race: 并行执行多个Promise，并在第一个Promise完成后返回结果。
Promise.allSettled: 并行执行多个Promise，并在所有Promise都完成后返回结果，无论成功或失败。
Promise.any: 并行执行多个Promise，并在第一个Promise成功完成后返回结果。

使用`Promise.all`进行并行处理

Promise.all是最常用的Promise组合方法之一。它接受一个Promise数组作为参数，并返回一个新的Promise。这个新的Promise在所有输入的Promise都成功完成后才会被解决，并返回一个包含所有结果的数组。

typescript
const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
const promise3 = Promise.resolve(3);

Promise.all([promise1, promise2, promise3])
  .then((results) => {
    console.log(results); // 输出: [1, 2, 3]
  })
  .catch((error) => {
    console.error(error);
  });

备注

如果Promise.all中的任何一个Promise被拒绝（rejected），整个Promise.all将立即被拒绝，并返回第一个被拒绝的Promise的错误。

使用`Promise.race`进行竞争处理

Promise.race方法接受一个Promise数组，并返回一个新的Promise。这个新的Promise在第一个输入的Promise完成后就会被解决或拒绝。

typescript
const promise1 = new Promise((resolve) => setTimeout(resolve, 500, 'one'));
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, 'two'));

Promise.race([promise1, promise2])
  .then((result) => {
    console.log(result); // 输出: 'two'
  })
  .catch((error) => {
    console.error(error);
  });

警告

Promise.race只关心第一个完成的Promise，无论它是成功还是失败。因此，在使用Promise.race时，务必考虑所有可能的场景。

使用`Promise.allSettled`处理所有结果

Promise.allSettled方法接受一个Promise数组，并返回一个新的Promise。这个新的Promise在所有输入的Promise都完成后才会被解决，无论它们是成功还是失败。返回的结果是一个包含每个Promise状态和值的数组。

typescript
const promise1 = Promise.resolve(1);
const promise2 = Promise.reject('Error occurred');
const promise3 = Promise.resolve(3);

Promise.allSettled([promise1, promise2, promise3])
  .then((results) => {
    console.log(results);
    // 输出:
    // [
    //   { status: 'fulfilled', value: 1 },
    //   { status: 'rejected', reason: 'Error occurred' },
    //   { status: 'fulfilled', value: 3 }
    // ]
  });

提示

Promise.allSettled非常适合在需要处理多个异步操作，并且不希望其中一个操作的失败影响其他操作的场景。

使用`Promise.any`获取第一个成功的结果

Promise.any方法接受一个Promise数组，并返回一个新的Promise。这个新的Promise在第一个输入的Promise成功完成后就会被解决。如果所有的Promise都被拒绝，Promise.any将返回一个AggregateError。

typescript
const promise1 = Promise.reject('Error 1');
const promise2 = Promise.resolve('Success 2');
const promise3 = Promise.reject('Error 3');

Promise.any([promise1, promise2, promise3])
  .then((result) => {
    console.log(result); // 输出: 'Success 2'
  })
  .catch((error) => {
    console.error(error); // 如果所有Promise都被拒绝，将输出AggregateError
  });

注意

Promise.any只有在至少一个Promise成功时才会被解决。如果所有Promise都被拒绝，它将返回一个AggregateError，其中包含所有被拒绝的原因。

实际案例：并行获取多个API数据

假设我们需要从多个API端点获取数据，并在所有数据都获取完成后进行处理。我们可以使用Promise.all来实现这一需求。

typescript
const fetchUserData = fetch('https://api.example.com/user');
const fetchPostsData = fetch('https://api.example.com/posts');
const fetchCommentsData = fetch('https://api.example.com/comments');

Promise.all([fetchUserData, fetchPostsData, fetchCommentsData])
  .then((responses) => Promise.all(responses.map((response) => response.json())))
  .then((data) => {
    const [userData, postsData, commentsData] = data;
    console.log('User Data:', userData);
    console.log('Posts Data:', postsData);
    console.log('Comments Data:', commentsData);
  })
  .catch((error) => {
    console.error('Error fetching data:', error);
  });

在这个例子中，我们并行地获取了用户数据、帖子数据和评论数据，并在所有数据都获取完成后进行处理。

总结

Promise组合是处理多个异步操作的有力工具。通过使用Promise.all、Promise.race、Promise.allSettled和Promise.any，我们可以更高效地管理异步任务，并编写出更具可读性和可维护性的代码。

附加资源

练习

使用Promise.all从多个API端点获取数据，并在所有数据都获取完成后进行处理。
使用Promise.race实现一个超时机制，如果某个异步操作在指定时间内未完成，则返回超时错误。
使用Promise.allSettled处理多个异步操作，并记录每个操作的结果，无论成功或失败。

通过实践这些练习，你将更深入地理解Promise组合的强大功能。

什么是Promise组合？​

常见的Promise组合方法​

使用Promise.all进行并行处理​

使用Promise.race进行竞争处理​

使用Promise.allSettled处理所有结果​

使用Promise.any获取第一个成功的结果​

实际案例：并行获取多个API数据​

总结​

附加资源​

练习​