如何通过Axios发送带user_id的自定义请求获取特定用户数据（替代前端全量数据过滤方式）

好问题！相比先拉取全量数据再前端过滤，直接请求目标用户的数据不仅能减少前端的冗余计算，还能降低服务器带宽消耗，是更高效的做法。下面分步骤帮你实现：

1. 调整Axios请求，携带user_id参数 #

首先你需要把user.id通过请求传递给后端，常见的有两种方式，具体用哪种取决于你的后端接口路由设计：

方式一：查询参数（Query Parameter） #

把user_id作为URL的查询参数传递，格式类似?user_id=xxx：

const [userProfiles, setUserProfiles] = React.useState([]);
// 注意依赖数组要加上user.id，当用户切换时自动重新请求
useEffect(() => {
  // 确保user.id存在再发起请求，避免无效调用
  if (!user?.id) return;

  axios
    .get(`http://localhost:8000/api/profile/?user_id=${user.id}`)
    .then((response) => {
      setUserProfiles(response.data);
      console.log("特定用户数据：", response.data);
    })
    .catch((err) => console.error("请求失败：", err));
}, [user.id]); // 依赖user.id，值变化时自动触发新请求

方式二：路径参数（Path Parameter） #

如果后端接口设计成REST风格，比如/api/profile/{user_id}，就用路径参数传递：

const [userProfiles, setUserProfiles] = React.useState([]);

useEffect(() => {
  if (!user?.id) return;

  axios
    .get(`http://localhost:8000/api/profile/${user.id}`)
    .then((response) => {
      setUserProfiles(response.data);
      console.log("特定用户数据：", response.data);
    })
    .catch((err) => console.error("请求失败：", err));
}, [user.id]);

2. 简化前端渲染逻辑 #

因为现在后端返回的已经是该用户的专属数据了，不需要再做前端过滤，直接遍历渲染即可：

<ul>
  {userProfiles.map((item) => (
    <li key={item.id}>
      <div>{item.username}</div>
    </li>
  ))}
</ul>

3. 关键注意事项 #

• 后端配合调整：你需要确保后端接口能够接收user_id参数（无论是查询参数还是路径参数），并从数据库中查询返回该用户对应的档案数据。
• 空值防护：加入!user?.id的判断，避免在user对象还未加载完成时发起无效请求。
• 依赖数组：一定要把user.id加入useEffect的依赖数组，这样当用户身份切换（比如登录不同账号）时，会自动重新请求新用户的数据。

这样修改后，你的前端代码会更简洁高效，也能减少不必要的数据传输~

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