JS中嵌套Fetch请求合并数据失败问题求助

我帮你梳理下代码里的问题，然后给出能正常工作的版本：

原代码的核心问题 #

• 第一个fetch的URL有语法错误：https://http://somewebsite.com/users 重复了协议头，应该改成 http://somewebsite.com/users（或者根据实际情况用https）
• 错误地在then后面直接用forEach：forEach不会返回Promise，也无法被await或后续的then捕获，应该用map生成每个用户详情请求的Promise数组，再通过Promise.all等待所有请求完成
• resp.json()是异步操作，必须用await才能拿到结果，原代码没加这个关键步骤
• 数据合并逻辑错误：你想把详情数据合并到用户对象里，但原代码错误地覆盖了user.login，还多写了一次无用的.json()

修正后的代码 #

async function dataFetch() {
  // 1. 获取并解析用户列表
  const usersResp = await fetch("http://somewebsite.com/users");
  const users = await usersResp.json();

  // 2. 批量请求用户详情并合并数据
  const mergedUsers = await Promise.all(users.map(async (user) => {
    const detailsResp = await fetch(`http://website.com/details/${user.login}`);
    // 根据你给的示例，第二个接口返回数组，所以匹配对应login的详情项
    const detailsList = await detailsResp.json();
    const userDetails = detailsList.find(item => item.login === user.login);
    
    // 合并基础数据与详情数据，不修改原对象
    return { ...user, ...userDetails };
  }));

  // 3. 输出并返回结果
  console.log(mergedUsers);
  return mergedUsers;
}

// 调用函数并捕获错误
dataFetch().catch(err => console.error("请求出错：", err));

代码解释 #

1. 先通过两次await确保完整拿到并解析用户列表数据，避免异步操作的时序问题
2. 用users.map遍历每个用户，为每个用户发起详情请求：
   • map会返回一个包含所有详情请求Promise的数组
   • Promise.all会等待所有请求完成，一次性拿到所有合并后的用户数据
3. 用扩展运算符{ ...user, ...userDetails }创建新对象，既保留原用户的password，又合并详情里的name和age，避免污染原数据
4. 加上catch捕获请求过程中可能出现的网络错误、解析错误等，让代码更健壮

测试结果 #

按照你提供的接口返回数据，运行后会得到你期望的输出：

[ {"login":"xor","password":"1234","name":"Capri Cosa", "age": "33"}, {"login":"Ozark","password":"56789","name":"Marg Arita", "age": "27"} ]

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