Axios获取多个JSON端点并保存到状态(react)

npm install axios

yarn add axios

import axios from 'axios';

componentDidMount() {
  axios.all([
    axios.get('https://example.com/api/endpoint1'),
    axios.get('https://example.com/api/endpoint2'),
    axios.get('https://example.com/api/endpoint3')
  ])
  .then(axios.spread((response1, response2, response3) => {
    // 分别处理每个请求的响应数据
    this.setState({
      data1: response1.data,
      data2: response2.data,
      data3: response3.data
    });
  }))
  .catch(error => {
    // 处理请求错误
    console.error('Error:', error);
  });
}

render() {
  const { data1, data2, data3 } = this.state;

  return (
    <div>
      {/* 使用获取到的数据 */}
      <p>Data from endpoint 1: {data1}</p>
      <p>Data from endpoint 2: {data2}</p>
      <p>Data from endpoint 3: {data3}</p>
    </div>
  );
}