JavaScript中如何从多URL获取数据并存入单个数组

你可以通过以下两种方式实现将所有请求返回的stoppages对象存入一个数组：

方案一：批量处理所有请求（适合filteredG更新后重新获取全量数据） #

这种方法利用Promise.all等待所有异步请求完成，再将结果合并为单个数组，能确保你拿到完整的数据集：

let allStoppages = [];

// 把每个route的请求转换为Promise，传入Promise.all统一处理
Promise.all(filteredG.map(route => 
  fetch(`/api/stoppages?routeId=${route.id}`)
    .then(response => response.json())
))
.then(allData => {
  // 将多个stoppages数组合并成一维数组
  allStoppages = allData.flat();
  console.log('所有stoppages:', allStoppages);
})
.catch(error => console.error('请求失败:', error));

说明： #

• filteredG.map(...)会为每个route生成一个fetch请求的Promise，Promise.all会等待所有Promise完成。
• allData是一个包含多个stoppages数组的二维数组，使用flat()方法可以直接将其转换为一维数组，得到所有stoppages对象的集合。

方案二：实时追加数据（适合filteredG动态变化，需增量更新） #

如果filteredG会频繁新增元素，可以维护一个全局数组，每次处理新的route时将结果追加进去：

let allStoppages = [];

// 封装请求并追加数据的函数
const addStoppages = (route) => {
  fetch(`/api/stoppages?routeId=${route.id}`)
    .then(response => response.json())
    .then(data => {
      // 展开当前route的stoppages数组，追加到全局数组
      allStoppages.push(...data);
      // 可选：如果需要避免重复的stoppages（根据id去重）
      // allStoppages = [...new Map(allStoppages.map(s => [s.id, s])).values()];
      console.log('当前所有stoppages:', allStoppages);
    })
    .catch(error => console.error('单个请求失败:', error));
};

// 初始处理所有现有route
filteredG.forEach(addStoppages);

// 后续filteredG新增route时，直接调用addStoppages处理新增项即可
// 示例：addStoppages(newRoute);

为什么原代码无法收集数据？ #

原代码中forEach同步遍历，但fetch是异步操作，你仅在then里打印了单个stoppage，没有将其存入统一的数组容器。上述两种方法通过全局数组存储结果，结合Promise.all或异步追加的方式，解决了异步请求的数据收集问题。

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