React Router 6中能否在loader函数内发起两个API调用？

当然可以在React Router 6的loader函数里发起多个API调用，你的思路没问题，但代码里有几个关键问题导致没得到预期结果：

问题分析 #

• 没有解析Fetch响应体：fetch返回的是Response对象，不是接口返回的实际数据，需要调用.json()（或对应格式的解析方法）才能拿到真实数据。
• 未处理第二个请求的错误：你只检查了第一个请求的ok状态，第二个请求失败时不会抛出错误。
• 串行请求影响性能：两个await fetch会串行执行，耗时是两个请求的时间总和，改成并行请求能提升效率。

修正后的代码 #

Loader函数 #

export async function loader({ request, params }) {
  const id = params.roomId;
  
  // 并行发起两个请求，提升性能
  const [roomResponse, reservationResponse] = await Promise.all([
    fetch(`http://localhost:8080/rooms/${id}`),
    fetch(`http://localhost:8080/rooms/reservation/${id}`)
  ]);

  // 检查两个请求的状态，任意一个失败就抛出错误
  if (!roomResponse.ok || !reservationResponse.ok) {
    throw json(
      { message: '获取房间信息或预订数据失败' },
      { status: roomResponse.ok ? reservationResponse.status : roomResponse.status }
    );
  }

  // 解析两个响应的实际数据
  const roomData = await roomResponse.json();
  const reservationData = await reservationResponse.json();

  // 返回组合后的对象
  return {
    data: roomData,
    reservation: reservationData
  };
}

组件使用 #

function MainComponent (){
  const { data, reservation } = useRouteLoaderData('room-details');
  // 这里可以直接使用解析后的data和reservation数据
  ...
}
export default MainComponent;

补充说明 #

• 使用Promise.all可以让两个请求同时发起，总耗时等于较慢的那个请求的时间，比串行请求更高效。
• 如果需要处理单个请求失败的场景（比如一个成功一个失败），可以不用Promise.all，而是分别处理每个请求的错误逻辑，根据业务需求返回对应的 fallback 数据。

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