使用await Promise.all获取已解析对象的更简洁的方法

Promise.all 是一个非常有用的 JavaScript 方法，它允许你并行执行多个 Promise，并在所有 Promise 都成功解析后返回一个包含所有解析值的数组。使用 await 关键字与 Promise.all 结合，可以使异步代码看起来更像同步代码，从而提高代码的可读性和简洁性。

基础概念

Promise: 是 JavaScript 中表示异步操作最终完成或失败的对象。
Promise.all: 接收一个 Promise 对象的数组作为参数，当这个数组里的所有 Promise 对象都成功解析后，它返回一个新的 Promise 对象，这个新的 Promise 对象解析为一个数组，包含所有输入 Promise 的解析值。

优势

并行执行: 可以同时启动多个异步操作，而不是等待前一个完成后再启动下一个。
统一处理: 所有异步操作完成后，可以一次性处理所有的结果。
错误处理: 如果任何一个 Promise 被拒绝，Promise.all 会立即拒绝，并返回第一个被拒绝的 Promise 的错误信息。

类型

Promise.all 返回的是一个 Promise 对象。

应用场景

并发请求: 当你需要同时从多个 API 获取数据时。
并行计算: 在数据处理或算法中，需要同时执行多个计算任务时。
资源加载: 在网页或应用中需要同时加载多个资源时。

示例代码

假设我们有三个异步函数 fetchData1, fetchData2, 和 fetchData3，它们都返回 Promise 对象。

async function fetchData1() {
  // 模拟异步操作
  return new Promise((resolve) => setTimeout(() => resolve('Data 1'), 1000));
}

async function fetchData2() {
  // 模拟异步操作
  return new Promise((resolve) => setTimeout(() => resolve('Data 2'), 1500));
}

async function fetchData3() {
  // 模拟异步操作
  return new Promise((resolve) => setTimeout(() => resolve('Data 3'), 500));
}

async function getAllData() {
  try {
    const [data1, data2, data3] = await Promise.all([
      fetchData1(),
      fetchData2(),
      fetchData3()
    ]);
    console.log(data1, data2, data3); // 输出: Data 1 Data 2 Data 3
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

getAllData();

可能遇到的问题及解决方法

问题: 如果数组中的某个 Promise 被拒绝，Promise.all 会立即拒绝，并且不会等待其他 Promise 完成。

解决方法: 使用 Promise.allSettled，它会等待所有 Promise 完成，无论它们是解析还是拒绝，并返回一个包含每个 Promise 结果的对象数组。

async function handleAllSettled() {
  const results = await Promise.allSettled([
    fetchData1(),
    fetchData2(),
    fetchData3()
  ]);

  results.forEach((result, index) => {
    if (result.status === 'fulfilled') {
      console.log(`Promise ${index + 1} succeeded with value:`, result.value);
    } else {
      console.error(`Promise ${index + 1} failed with reason:`, result.reason);
    }
  });
}

handleAllSettled();

通过这种方式，即使某些 Promise 失败，你仍然可以处理其他成功的结果。