如何处理两层嵌套fetch请求并合并两个JSON响应为可遍历的统一数组

你需要通过Promise.all批量处理所有外部接口的异步请求，待所有请求完成后组装目标字段即可。推荐搭配async/await语法简化异步逻辑编写，改造后的完整代码如下：

async function lookupData(input, funct = "auto") {
  try {
    // 调用本地接口获取源数据
    const localRes = await fetch(`/lookup/${input}/${funct}`, {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
    });
    const localData = await localRes.json();

    if (funct !== "sources") {
      console.log(localData.result);
      return localData.result;
    }

    // 为每个站点生成HIBP接口请求任务
    const requestTasks = localData.sources.map(async (sourceName) => {
      try {
        // 调用HIBP接口，注意v3版本需要自行添加hibp-api-key请求头
        const hibpRes = await fetch(`https://haveibeenpwned.com/api/v3/breach/${sourceName}`, {
          headers: {
            // "hibp-api-key": "你申请的HIBP API密钥"
          }
        });
        const hibpData = await hibpRes.json();
        // 组装需要的字段
        return {
          name: sourceName,
          title: hibpData.Title,
          description: hibpData.Description,
          logoPath: hibpData.LogoPath
        };
      } catch (e) {
        // 单个请求错误容错处理，可按需调整默认返回值
        console.error(`获取${sourceName}数据失败:`, e);
        return {
          name: sourceName,
          title: null,
          description: "数据获取失败",
          logoPath: null
        };
      }
    });

    // 等待所有请求完成，得到最终重组数组
    const finalResult = await Promise.all(requestTasks);
    console.log("重组后的结果：", finalResult);
    return finalResult;
  } catch (e) {
    console.error("本地接口请求失败：", e);
  }
}

代码说明 #

• 单个HIBP接口请求单独做了错误捕获，避免某一个站点请求失败导致所有数据无法返回，你可以根据实际需求调整错误时的默认返回结构
• HaveIBeenPwned v3接口要求必须携带请求头hibp-api-key才能正常调用，你需要先申请对应API密钥后，在HIBP请求的headers配置中添加该字段
• 最终返回的finalResult就是你需要的多维JSON数组，可直接传入后续遍历逻辑使用

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