嵌套Fetch与循环问题：如何获取并合并两次接口返回数据

这个问题我之前也踩过坑！核心原因是fetch是异步操作——你的for循环会一口气执行完，但里面的每个fetch请求还在后台跑，等请求返回结果的时候，外层的代码早就执行完了，自然没法拿到所有二次请求的数据来合并。

下面是我常用的解决方案，用Promise.all来处理批量异步请求，完美解决这个问题：

fetch(URL)
  .then(res => res.json())
  .then(companies => {
    // 把每个公司的二次请求包装成Promise，同时合并数据
    const mergedPromises = companies.map(company => {
      return fetch(`URL${company.id}`)
        .then(res => res.json())
        .then(relatedData => {
          // 合并初始公司数据和关联数据，这里可以自定义字段名
          return {
            ...company,
            relatedInfo: relatedData // 把关联数据存到relatedInfo字段里
          };
        });
    });

    // 等待所有二次请求都完成，拿到所有合并后的数据
    return Promise.all(mergedPromises);
  })
  .then(finalMergedData => {
    // 这里就是你要的最终合并数组！
    console.log('合并完成的数据:', finalMergedData);
    // 接下来可以在这里处理这些数据，比如渲染页面之类的
  })
  .catch(error => console.error('请求过程出错:', error));

代码解释： #

1. 先用第一个fetch拿到初始的companies数组。
2. 用map遍历每个公司，给每个公司返回一个包含二次请求和数据合并逻辑的Promise——这样我们就得到了一个Promise数组。
3. 用Promise.all等待这个数组里的所有Promise都完成，它会把所有Promise返回的结果收集成一个新数组，就是我们要的合并后的数据。
4. 最后在then里就能拿到完整的合并数组，放心处理就行。

额外优化：处理个别请求失败的情况 #

如果怕某个公司的二次请求失败导致整个流程挂掉，可以给每个内部的fetch加个catch，让失败的请求也返回一个带标记的对象：

const mergedPromises = companies.map(company => {
  return fetch(`URL${company.id}`)
    .then(res => res.json())
    .then(relatedData => ({...company, relatedInfo: relatedData}))
    .catch(error => ({
      ...company,
      relatedInfo: null,
      errorMsg: `获取关联数据失败: ${error.message}`
    }));
});

这样即使个别请求失败，其他请求的结果依然能正常返回，你可以在最终的数组里过滤出有错误的项做后续处理。

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