在React中执行多个GET请求时处理第二响应

Question

I've manage to pass the first response into the state name data (this.state.data) of the component. But when I trying doing a second request for data1 from another API, it's not showing up. Both responses are good from checking in dev tool and the first one I can use the data.

class WeatherApp extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    error: null,
    isLoaded: false,
    data: [],
    data1: []
  };
}

componentDidMount() {
  Promise.all([
      fetch("weatherAPI.php"),
      fetch("weatherAPIToday.php")
    ]).then(([res, res1]) => res.json())
    .then((result, result1) => {
        this.setState({
          isLoaded: true,
          data: result,
          data1: result1
        }, console.log(result));
      },

      (error) => {
        this.setState({
          isLoaded: true,
          error
        });
      }
    );
}

Answer 1

Because both res and res1 return a promise, all you have to do is wrap them both in a Promise#all

Promise.all([
    fetch("weatherAPI.php"),
    fetch("weatherAPIToday.php")
]).then(([res, res1]) => Promise.all(res.json(), res1.json()))
.then((result, result1) => {
    this.setState({
        isLoaded: true,
        data: result,
        data1: result1
    }, console.log(result));
})
.catch(error => {
    this.setState({ isLoaded: true, error });
});