如何处理发往同一地址的两个请求并使用两个请求的返回数据

你当前的核心问题是后端/specialties接口会连续输出两段JSON字符串，拼接后的内容不符合JSON格式规范，前端调用res.json()时会直接解析失败，自然没法正常使用返回数据。另外前端重复请求同一接口也属于不必要的资源浪费。

方案1：单接口返回全量数据（推荐） #

只需要发起一次请求就能拿到两份数据，性能更好。

第一步：修改PHP后端逻辑 #

1. 调整specialties.php里的两个工具函数，不要直接输出JSON，改为返回数组结果，同时补全数组初始化逻辑避免空查询报错：

function getSpecialties($pdo){
  $specialties = 'SELECT * FROM `specialties`';
  $stmt = $pdo->query($specialties);
  $specialtiesList = []; // 补全初始化
  while ($special = $stmt->fetch()){
    $specialtiesList[] = $special;
  }
  return $specialtiesList;
}
function getSubjectsSpecial($pdo){
  $subjectsSpecial = 'SELECT `subjects`.`title` FROM `subjects` WHERE `id_specialties` = 2';
  $stmt = $pdo->query($subjectsSpecial);
  $subjectsSpecialList = []; // 补全初始化
  while ($subjectSpecial = $stmt->fetch()){
    $subjectsSpecialList[] = $subjectSpecial;
  }
  return $subjectsSpecialList;
}

2. 修改index.php接口逻辑，将两份数据整合为统一结构后一次性输出：

if($method === 'GET'){
  if($type === 'subjects'){
    echo json_encode(getSubjects($pdo));
  } elseif($type === 'specialties'){
    // 整合两份数据为结构化对象
    $response = [
      'specialties' => getSpecialties($pdo),
      'subjectsSpecial' => getSubjectsSpecial($pdo)
    ];
    echo json_encode($response);
  }
}

第二步：调整前端请求逻辑 #

只需要发起一次请求就能拿到两份数据，同时删掉原有代码里多余的})语法错误：

async function getSpecialData(){
  let res = await fetch ('http://server-npk-web-core/specialties');
  let data = await res.json();
  // 直接从返回结果里取两份数据使用
  let specialties = data.specialties;
  let subjectsSpecial = data.subjectsSpecial;
}

方案2：拆分多接口分别请求 #

如果业务需要分开请求两份数据，可以给接口加参数区分不同查询场景：

第一步：修改index.php接口逻辑 #

if($method === 'GET'){
  if($type === 'subjects'){
    echo json_encode(getSubjects($pdo));
  } elseif($type === 'specialties'){
    $action = $_GET['action'] ?? 'list';
    // 根据参数返回对应数据
    if($action === 'list'){
      echo json_encode(getSpecialties($pdo));
    } elseif($action === 'subjects'){
      echo json_encode(getSubjectsSpecial($pdo));
    }
  }
}

第二步：调整前端请求地址，分别加参数区分 #

async function getSpecialties(){
  let res = await fetch ('http://server-npk-web-core/specialties?action=list');
  let specialties = await res.json();
  // 处理专业列表逻辑
}
async function getSubjectsSpecial(){
  let res = await fetch ('http://server-npk-web-core/specialties?action=subjects');
  let subjectsSpecial = await res.json();
  // 处理科目列表逻辑
}

内容的提问来源于stack exchange，提问作者Алексей Кострица