如何使用Promise.all分解动态数量的异步调用的结果

基础概念

Promise.all 是 JavaScript 中的一个方法，用于处理多个 Promise 对象。当所有 Promise 都成功完成时，它会返回一个包含所有 Promise 结果的数组。如果任何一个 Promise 失败，则 Promise.all 会立即返回该 Promise 的错误。

相关优势

1. 并行执行：Promise.all 允许你并行执行多个异步操作，而不是顺序执行，从而提高性能。
2. 统一处理：你可以一次性处理所有异步操作的结果，而不需要逐个处理。
3. 错误处理：如果任何一个 Promise 失败，你可以立即捕获并处理错误。

类型

Promise.all 接受一个 Promise 对象的数组作为参数，并返回一个新的 Promise 对象。

应用场景

当你需要同时执行多个异步操作，并且希望在所有操作完成后处理结果时，可以使用 Promise.all。例如，从多个 API 获取数据并进行汇总。

示例代码

假设你有一个动态数量的 URL 列表，需要并行获取这些 URL 的内容：

async function fetchUrls(urls) {
  try {
    const promises = urls.map(url => fetch(url));
    const responses = await Promise.all(promises);
    const data = await Promise.all(responses.map(response => response.json()));
    return data;
  } catch (error) {
    console.error('Error fetching URLs:', error);
    throw error;
  }
}

// 示例使用
const urls = [
  'https://api.example.com/data1',
  'https://api.example.com/data2',
  'https://api.example.com/data3'
];

fetchUrls(urls)
  .then(data => {
    console.log('Fetched data:', data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

解释

1. 创建 Promise 数组：使用 urls.map(url => fetch(url)) 创建一个 Promise 数组，每个 Promise 对应一个 URL 的 fetch 操作。
2. 等待所有 Promise 完成：使用 await Promise.all(promises) 等待所有 fetch 操作完成。
3. 处理响应：使用 Promise.all(responses.map(response => response.json())) 将所有响应转换为 JSON 格式。
4. 错误处理：使用 try...catch 块捕获并处理任何可能的错误。

参考链接

• MDN Web Docs: Promise.all

通过这种方式，你可以有效地处理动态数量的异步调用，并确保所有操作完成后进行统一处理。