React.js组件中如何从两个独立URL获取数据？

嘿，我来给你梳理下在React组件里处理两个独立API请求的几种靠谱方式～ 首先你选的componentDidMount这个生命周期方法是完全没问题的，它就是专门用来在组件挂载后发起异步请求的地方，咱们就在这里扩展逻辑就好。

推荐：并行请求（效率最高） #

因为你的两个URL是独立的，不需要互相依赖数据，所以同时发起两个请求是最优解，能节省等待时间。咱们可以用Promise.all来实现：

export default class App extends Component {
  // 初始化state来存储两个请求的数据和错误信息
  state = {
    user: null,
    otherData: null,
    error: null
  };

  async componentDidMount() {
    try {
      // 同时发起两个fetch请求，用解构获取两个响应
      const [response1, response2] = await Promise.all([
        fetch(`URL_1`),
        fetch(`URL_2`)
      ]);

      // 检查请求是否成功（fetch不会自动处理HTTP错误，比如404/500）
      if (!response1.ok) throw new Error(`URL_1 请求失败：${response1.status}`);
      if (!response2.ok) throw new Error(`URL_2 请求失败：${response2.status}`);

      // 解析响应为JSON
      const user = await response1.json();
      const otherData = await response2.json();

      // 把数据存入state，触发组件更新
      this.setState({ user, otherData });
    } catch (error) {
      // 捕获并处理错误
      console.error('请求出错：', error);
      this.setState({ error: error.message });
    }
  }

  render() {
    const { user, otherData, error } = this.state;

    // 错误状态展示
    if (error) return <div>请求出错：{error}</div>;
    // 加载状态展示
    if (!user || !otherData) return <div>加载中...</div>;

    // 正常渲染数据
    return (
      <div className="app-container">
        <h3>用户数据</h3>
        <pre>{JSON.stringify(user, null, 2)}</pre>
        <h3>其他数据</h3>
        <pre>{JSON.stringify(otherData, null, 2)}</pre>
      </div>
    );
  }
}

这种方式的好处是两个请求同时发送，不会等第一个请求完成才发起第二个，能大幅减少等待时间。

备选：串行请求（仅适合有依赖的场景） #

如果你的两个请求有依赖关系（比如第二个请求需要用到第一个请求返回的数据），那可以用串行的方式，但如果是独立请求，这种方式会慢一些，不推荐：

export default class App extends Component {
  state = { user: null, otherData: null, error: null };

  async componentDidMount() {
    try {
      // 先请求URL_1
      const response1 = await fetch(`URL_1`);
      if (!response1.ok) throw new Error(`URL_1 请求失败：${response1.status}`);
      const user = await response1.json();

      // 再请求URL_2
      const response2 = await fetch(`URL_2`);
      if (!response2.ok) throw new Error(`URL_2 请求失败：${response2.status}`);
      const otherData = await response2.json();

      this.setState({ user, otherData });
    } catch (error) {
      console.error('请求出错：', error);
      this.setState({ error: error.message });
    }
  }

  // 渲染逻辑和上面一致
}

额外提醒： #

• 一定要处理错误！fetch API不会在HTTP状态码为4xx/5xx时自动抛出错误，所以必须手动检查response.ok。
• 记得把请求到的数据存入组件的state，这样组件才能根据数据更新渲染内容。

内容的提问来源于stack exchange，提问作者Евгений Федосеев