1.07 TypeScript异步函数与Promise.all的使用

在 TypeScript 中，异步函数和 Promise.all 的结合使用可以有效地处理并行异步操作。以下是详细的说明和示例，展示如何在 TypeScript 中使用异步函数和 Promise.all。

异步函数

异步函数是使用 async 关键字定义的函数，它们总是返回一个 Promise。在异步函数内部，可以使用 await 关键字等待一个 Promise 的解析。

定义异步函数

async function fetchData(url: string): Promise<any> {
  const response = await fetch(url);
  const data = await response.json();
  return data;
}

在这个示例中，fetchData 函数是一个异步函数，它发送一个 HTTP 请求并返回解析后的 JSON 数据。

Promise.all

Promise.all 方法用于并行执行多个 Promise，并在所有 Promise 都解析后返回一个包含所有结果的 Promise。如果任何一个 Promise 被拒绝，Promise.all 返回的 Promise 也会被拒绝。

使用 Promise.all

async function fetchMultipleData(urls: string[]): Promise<any[]> {
  const promises = urls.map(url => fetchData(url));
  const results = await Promise.all(promises);
  return results;
}

在这个示例中，fetchMultipleData 函数接收一个 URL 数组，并使用 Promise.all 并行获取所有 URL 的数据。

示例：并行获取多个 API 数据

假设我们有多个 API 端点，需要并行获取它们的数据：

const urls = [
  'https://api.example.com/data1',
  'https://api.example.com/data2',
  'https://api.example.com/data3'
];
 
async function fetchData(url: string): Promise<any> {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(`Failed to fetch data from ${url}`);
  }
  return response.json();
}
 
async function fetchAllData(urls: string[]): Promise<any[]> {
  try {
    const data = await Promise.all(urls.map(url => fetchData(url)));
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
    throw error;
  }
}
 
fetchAllData(urls)
  .then(data => {
    console.log('All data fetched:', data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

在这个示例中：

1. fetchData 函数发送 HTTP 请求并返回解析后的 JSON 数据。
2. fetchAllData 函数使用 Promise.all 并行获取所有 URL 的数据，并处理可能的错误。
3. fetchAllData 函数被调用，并在所有数据获取成功后输出结果，或者在发生错误时输出错误信息。

注意事项

1. 错误处理：在使用 Promise.all 时，如果任何一个 Promise 被拒绝，整个 Promise.all 调用都会被拒绝。因此，确保在异步函数中正确处理错误。

2. 性能：Promise.all 并行执行所有 Promise，这对于需要并行处理的任务非常高效。但是，如果任务之间有依赖关系，可能需要使用其他方法来处理。

3. 类型安全：TypeScript 的类型系统可以帮助确保异步函数的返回类型和 Promise.all 的结果类型是正确的。例如：

async function fetchData(url: string): Promise<{ data: string }> {
  const response = await fetch(url);
  return response.json();
}
 
async function fetchAllData(urls: string[]): Promise<{ data: string }[]> {
  const data = await Promise.all(urls.map(url => fetchData(url)));
  return data;
}

通过这些示例和注意事项，你可以在 TypeScript 中更高效地使用异步函数和 Promise.all 来处理并行异步操作。

Citations: [1] https://www.geeksforgeeks.org/how-to-type-an-async-function-in-typescript/ [2] https://basarat.gitbook.io/typescript/future-javascript/async-await [3] https://www.typescriptlang.org/docs/handbook/release-notes/typescript-1-7.html [4] https://blog.logrocket.com/async-await-typescript/ [5] https://www.typescriptlang.org/play/javascript/modern-javascript/async-await.ts.html