如何在Remix框架的loader函数中调用多个API接口？

你可以通过并行请求+打包返回多份数据的方式实现，具体步骤如下：

1. 优化API调用方式（并行请求提升性能） #

用Promise.all同时发起多个API请求，避免串行等待浪费时间，然后分别解析每个响应的JSON数据。

2. 打包多份数据返回 #

将多个API的返回数据封装成一个对象，通过json()方法返回，这样组件就能一次性获取所有数据。

修改后的Loader代码：

export async function loader() {
  // 并行发起两个API请求
  const [usersRes, postsRes] = await Promise.all([
    fetch("https://reqres.in/api/users?page=2"),
    fetch("https://jsonplaceholder.typicode.com/posts")
  ]);

  // 解析每个响应的JSON数据
  const usersData = await usersRes.json();
  const postsData = await postsRes.json();

  // 打包多份数据返回
  return json({
    users: usersData,
    posts: postsData
  });
}

3. 组件中使用多份数据 #

在组件里通过useLoaderData()解构获取对应数据：

import { useLoaderData } from "@remix-run/react";

export default function YourPage() {
  const { users, posts } = useLoaderData();

  return (
    <div>
      <h2>用户列表</h2>
      <ul>
        {users.data.map(user => (
          <li key={user.id}>{user.first_name} {user.last_name}</li>
        ))}
      </ul>

      <h2>文章列表</h2>
      <ul>
        {posts.slice(0, 5).map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

可选：处理部分API失败的场景 #

如果需要容忍单个API请求失败（不影响其他数据返回），可以用Promise.allSettled替代Promise.all：

export async function loader() {
  const results = await Promise.allSettled([
    fetch("https://reqres.in/api/users?page=2").then(res => res.json()),
    fetch("https://jsonplaceholder.typicode.com/posts").then(res => res.json())
  ]);

  // 分别处理成功/失败的情况
  const usersData = results[0].status === "fulfilled" ? results[0].value : null;
  const postsData = results[1].status === "fulfilled" ? results[1].value : null;

  return json({ users: usersData, posts: postsData });
}

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