如何将数组元素作为GET请求参数并汇总所有响应为JSON

我有如下格式的数组：

const Data = [
  {
      user: '123456'
    },
  { 
      user: '123456'
    },
  {
      user: '123456'
    }
]

对应的REST API GET请求路由为：

router.get(`/courses/:user`)

我想将Data数组中每个元素的user值作为参数发起GET请求（请求示例：localhost:8000/courses/123456），并把所有请求的响应汇总成一个JSON数组。用forEach实现没成功，期望得到类似如下格式的结果：

var output = [{response1},{response2}, {response3}]

核心问题说明 #

forEach是同步遍历逻辑，无法等待异步请求完成就会走完循环，所以没法正确收集所有请求的响应结果。需要用Promise.all配合异步遍历的方式来处理。

实现代码示例 #

方式一：使用 axios + async/await

const axios = require('axios'); // Node环境需安装axios，浏览器环境直接引入即可

const Data = [
  { user: '123456' },
  { user: '123456' },
  { user: '123456' }
];

async function getAllResponses() {
  // 将每个用户的请求转为Promise实例
  const requestTasks = Data.map(item => {
    return axios.get(`http://localhost:8000/courses/${item.user}`);
  });

  // 等待所有请求完成，获取全部响应
  const allResponses = await Promise.all(requestTasks);

  // 提取响应中的数据，整理成目标格式
  const output = allResponses.map(res => res.data);
  console.log(output);
  return output;
}

// 执行函数
getAllResponses();

方式二：使用原生 fetch + async/await

const Data = [
  { user: '123456' },
  { user: '123456' },
  { user: '123456' }
];

async function getAllResponses() {
  const requestTasks = Data.map(item => {
    return fetch(`http://localhost:8000/courses/${item.user}`)
      .then(response => response.json()); // 解析响应为JSON格式
  });

  const output = await Promise.all(requestTasks);
  console.log(output);
  return output;
}

getAllResponses();

内容的提问来源于stack exchange，提问作者owodunni david