多个Axios请求进入ReactJS状态

npm install axios

import axios from 'axios';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data1: null,
      data2: null,
      data3: null
    };
  }

  componentDidMount() {
    this.fetchData();
  }

  fetchData() {
    const request1 = axios.get('http://api.example.com/data1');
    const request2 = axios.get('http://api.example.com/data2');
    const request3 = axios.get('http://api.example.com/data3');

    Promise.all([request1, request2, request3])
      .then(([response1, response2, response3]) => {
        this.setState({
          data1: response1.data,
          data2: response2.data,
          data3: response3.data
        });
      })
      .catch(error => {
        console.error('Error:', error);
      });
  }

  render() {
    // 在render方法中使用状态中的数据
    const { data1, data2, data3 } = this.state;

    return (
      <div>
        {/* 显示请求结果 */}
        <p>Data 1: {data1}</p>
        <p>Data 2: {data2}</p>
        <p>Data 3: {data3}</p>
      </div>
    );
  }
}