如何在单个函数中调用多个API并获取预期格式的数组数据？

尝试在单个JavaScript函数中一次性请求10个API，将返回数据整理为指定的嵌套数组格式，但现有代码无法得到预期结果。

原代码：

const ids = [1,2,3,4,5,6,7,8,9,10];

const fD= () => {
        const fP = ids?.map(async (id) => {
            const { data } = await axios.get(`https://jsonplaceholder.typicode.com/posts/${id}/comments`);
            return data;
        })
       return fP;
    };
    console.log(fD()); 

预期输出格式（将所有返回的50条评论按顺序每5条分为一组）：

[[{...}, {...}, {...}, {...}, {...}], // 第1-5条评论
 [{...}, {...}, {...}, {...}, {...}], // 第6-10条评论
 ...,
 [{...}, {...}, {...}, {...}, {...}]] // 第46-50条评论

原代码存在两个核心问题：

• map 中使用 async 函数会返回Promise数组，而非实际的请求结果，直接返回无法拿到最终数据。
• 没有对所有请求的结果进行合并和分组处理。

以下是修正后的实现：

const ids = [1,2,3,4,5,6,7,8,9,10];

const fD = async () => {
  // 1. 用Promise.all等待所有API请求完成，获取每个id对应的评论数组（二维数组）
  const allComments = await Promise.all(
    ids.map(id => axios.get(`https://jsonplaceholder.typicode.com/posts/${id}/comments`).then(res => res.data))
  );

  // 2. 扁平化二维数组，得到所有评论的一维数组（共50条）
  const flattened = allComments.flat();

  // 3. 将一维数组按每5条分组，生成预期的嵌套数组
  const grouped = [];
  for (let i = 0; i < flattened.length; i += 5) {
    grouped.push(flattened.slice(i, i + 5));
  }

  return grouped;
};

// 调用函数并处理结果
fD().then(result => console.log(result)).catch(err => console.error(err));

代码说明 #

1. Promise.all 处理并发请求：确保所有API请求都完成后再继续，避免拿到Pending状态的Promise。
2. 扁平化数组：flat() 方法将每个请求返回的5条评论数组合并成一个包含50条评论的一维数组。
3. 分组处理：通过循环每5个元素切片，把一维数组拆分为10个每组5条的嵌套数组，匹配预期格式。

内容的提问来源于stack exchange，提问作者ASIF AKBER