ReactJS开发：如何在单个组件中发起两次及以上REST请求？

嘿，作为React新手碰到这种需求太正常啦！我来给你几个实用的方案，帮你在单个组件里轻松搞定多个REST请求～

1. 同时发起多个独立请求（无依赖关系） #

如果你的几个请求之间不需要互相依赖，可以用Promise.all来同时触发，这样能提升请求效率，不用等一个请求结束再发下一个。结合React的useEffect和状态钩子就能轻松实现：

示例代码（用原生fetch） #

import { useState, useEffect } from 'react';

function MultiRequestComponent() {
  const [data1, setData1] = useState(null);
  const [data2, setData2] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 创建AbortController来清理请求，防止组件卸载后内存泄漏
    const controller = new AbortController();
    const signal = controller.signal;

    const fetchData = async () => {
      try {
        // 同时发起两个请求
        const [response1, response2] = await Promise.all([
          fetch('https://api.example.com/data1', { signal }),
          fetch('https://api.example.com/data2', { signal })
        ]);

        // 检查请求是否成功
        if (!response1.ok) throw new Error(`请求1失败: ${response1.status}`);
        if (!response2.ok) throw new Error(`请求2失败: ${response2.status}`);

        // 解析数据
        const result1 = await response1.json();
        const result2 = await response2.json();

        setData1(result1);
        setData2(result2);
      } catch (err) {
        // 排除AbortError（组件卸载时触发的取消请求错误）
        if (err.name !== 'AbortError') {
          setError(err.message);
        }
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    // 组件卸载时取消请求
    return () => controller.abort();
  }, []);

  if (loading) return <div>加载中...</div>;
  if (error) return <div>出错了: {error}</div>;

  return (
    <div>
      <h3>数据1:</h3>
      <pre>{JSON.stringify(data1, null, 2)}</pre>
      <h3>数据2:</h3>
      <pre>{JSON.stringify(data2, null, 2)}</pre>
    </div>
  );
}

export default MultiRequestComponent;

用Axios的版本（更简洁） #

如果你用axios库，代码会更清爽，它自带取消请求的机制：

import { useState, useEffect } from 'react';
import axios from 'axios';

function MultiRequestComponent() {
  const [data1, setData1] = useState(null);
  const [data2, setData2] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const source = axios.CancelToken.source();

    const fetchData = async () => {
      try {
        const [response1, response2] = await Promise.all([
          axios.get('https://api.example.com/data1', { cancelToken: source.token }),
          axios.get('https://api.example.com/data2', { cancelToken: source.token })
        ]);

        setData1(response1.data);
        setData2(response2.data);
      } catch (err) {
        if (!axios.isCancel(err)) {
          setError(err.message);
        }
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    return () => source.cancel('组件卸载，取消请求');
  }, []);

  // 后续的loading、error渲染和上面一样
  if (loading) return <div>加载中...</div>;
  if (error) return <div>出错了: {error}</div>;

  return (
    <div>
      <h3>数据1:</h3>
      <pre>{JSON.stringify(data1, null, 2)}</pre>
      <h3>数据2:</h3>
      <pre>{JSON.stringify(data2, null, 2)}</pre>
    </div>
  );
}

export default MultiRequestComponent;

2. 发起有依赖的请求（前一个请求结果作为后一个的参数） #

如果某个请求需要依赖另一个请求的返回结果（比如先获取用户ID，再用ID获取用户的详细信息），可以用async/await的链式调用：

示例代码 #

import { useState, useEffect } from 'react';

function DependentRequestComponent() {
  const [user, setUser] = useState(null);
  const [userPosts, setUserPosts] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;

    const fetchData = async () => {
      try {
        // 第一步：先获取用户信息
        const userResponse = await fetch('https://api.example.com/users/1', { signal });
        if (!userResponse.ok) throw new Error(`获取用户失败: ${userResponse.status}`);
        const userData = await userResponse.json();
        setUser(userData);

        // 第二步：用用户ID获取用户的帖子
        const postsResponse = await fetch(`https://api.example.com/users/${userData.id}/posts`, { signal });
        if (!postsResponse.ok) throw new Error(`获取帖子失败: ${postsResponse.status}`);
        const postsData = await postsResponse.json();
        setUserPosts(postsData);
      } catch (err) {
        if (err.name !== 'AbortError') {
          setError(err.message);
        }
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    return () => controller.abort();
  }, []);

  if (loading) return <div>加载中...</div>;
  if (error) return <div>出错了: {error}</div>;

  return (
    <div>
      <h3>用户信息:</h3>
      <pre>{JSON.stringify(user, null, 2)}</pre>
      <h3>用户帖子:</h3>
      <pre>{JSON.stringify(userPosts, null, 2)}</pre>
    </div>
  );
}

export default DependentRequestComponent;

一些关键注意事项 #

• 清理请求：一定要记得在组件卸载时取消未完成的请求，否则会导致内存泄漏，上面的示例都用了AbortController（fetch）或axios的CancelToken来处理。
• 错误处理：每个请求都要做错误判断（比如检查response.ok），并且区分开“用户主动取消请求”和“真正的请求错误”，避免错误提示混乱。
• 状态拆分：可以根据需求把loading、error状态拆得更细（比如分别给每个请求设置loading/error），这样能给用户更精准的反馈。

这些方案应该能覆盖你大部分的使用场景啦，要是有更具体的需求或者疑问，随时可以再调整～

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