如何用JavaScript Fetch根据项目列表获取对应项目详情数据？

嘿，我来帮你搞定这个需求！要实现以PROJECT_DATA_LIST为索引，从PROJECT_DATA里捞指定项目（比如project1）的数据，核心思路是先异步获取两个数据文件，再做数据匹配。我给你写个可直接运行的方案，还会拆解关键细节：

完整代码示例（Fetch/then版本） #

// 定义你要查找的目标项目
const targetProject = 'project1';

// 并行请求两个数据文件，比串行请求效率更高
Promise.all([
  // 获取关注项目列表
  fetch('PROJECT_DATA_LIST.json').then(res => {
    // 先检查请求是否成功，避免拿到错误响应
    if (!res.ok) throw new Error(`加载关注列表失败：${res.status}状态码`);
    return res.json();
  }),
  // 获取项目详细数据
  fetch('PROJECT_DATA.json').then(res => {
    if (!res.ok) throw new Error(`加载项目详情失败：${res.status}状态码`);
    return res.json();
  })
])
.then(([projectList, projectDetails]) => {
  // 第一步：确认目标项目在关注列表里
  if (!projectList.includes(targetProject)) {
    console.log(`⚠️ 目标项目${targetProject}不在你的关注列表中哦`);
    return;
  }

  // 第二步：从详细数据中筛选目标项目
  // 这里假设PROJECT_DATA的每个条目用`projectName`字段对应项目名，记得改成你实际的字段（比如id/name）
  const targetProjectData = projectDetails.find(item => item.projectName === targetProject);

  if (targetProjectData) {
    console.log(`🎉 找到${targetProject}的详细数据：`, targetProjectData);
    // 这里可以加你的业务逻辑，比如把数据渲染到页面上
  } else {
    console.log(`😮‍💨 关注列表里有${targetProject}，但详细数据中找不到对应信息`);
  }
})
.catch(error => {
  // 捕获所有可能的错误：网络问题、文件不存在、JSON解析失败等
  console.error('❌ 获取数据时出错：', error);
});

关键细节说明 #

• 并行请求优化：用Promise.all同时发起两个fetch请求，不用等第一个请求完成再发第二个，大大提升加载效率。
• 严谨的错误处理：每个fetch都加了res.ok判断，确保只有成功的响应才解析JSON；末尾的catch能捕获所有环节的错误，避免程序崩溃。
• 灵活适配数据结构：
  • 如果PROJECT_DATA_LIST不是单纯的字符串数组（比如是对象数组，每个元素有projectId字段），那判断逻辑要改成：projectList.some(item => item.projectId === targetProject)
  • 如果PROJECT_DATA里的项目标识不是projectName，换成你实际的字段（比如id）即可。
• 本地运行注意：浏览器的fetch不支持直接访问本地file://协议，所以要在服务器环境下运行代码（比如用VS Code的Live Server插件启动本地服务）。

可选：更简洁的Async/Await版本（本质还是Promise） #

如果你觉得then链有点绕，也可以用async/await语法糖，代码可读性更高：

async function getTargetProjectData(targetProject) {
  try {
    // 并行获取两个数据
    const [projectList, projectDetails] = await Promise.all([
      fetch('PROJECT_DATA_LIST.json').then(res => {
        if (!res.ok) throw new Error(`HTTP错误：${res.status}`);
        return res.json();
      }),
      fetch('PROJECT_DATA.json').then(res => {
        if (!res.ok) throw new Error(`HTTP错误：${res.status}`);
        return res.json();
      })
    ]);

    // 检查关注列表
    if (!projectList.includes(targetProject)) {
      return { success: false, msg: `${targetProject}不在关注列表` };
    }

    // 查找详情数据
    const targetData = projectDetails.find(item => item.projectName === targetProject);
    return targetData ? { success: true, data: targetData } : { success: false, msg: `未找到${targetProject}的详情` };
  } catch (err) {
    return { success: false, msg: `获取数据失败：${err.message}` };
  }
}

// 使用示例
getTargetProjectData('project1')
.then(result => {
  if (result.success) {
    console.log('项目数据：', result.data);
  } else {
    console.error(result.msg);
  }
});

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