javascript – React API calls in ComponentDidMount


I’m making an API call in my parent component in React. I’m making a weather app, and theres two different endpoints I’m getting data from. I’m getting 5 day forecast, and the current weather data.

I have two separate functions for the API calls, and I then call them functions in the componentDidMount function. I’m using async/await and I’m trying to avoid try/catch blocks.

import React from 'react';
import WeatherOverview from './WeatherOverview';
import { catchErrors } from '../helpers'

class App extends React.Component {
    constructor(props) {
        super(props);
    
        this.state = {
            forecasts: {
                error: null,
                isLoaded: false,
                forecasts: ()
            },
            currentForecast: {
                error: null,
                isLoaded: false,
                forecast: ()
            }
        }
    
        this.getForecastedWeather = this.getForecastedWeather.bind(this);
        this.getCurrentWeather = this.getCurrentWeather.bind(this);
    }
    

    async getForecastedWeather(){
        const endpoint = `http://dataservice.accuweather.com/forecasts/v1/daily/5day/207931?apikey=mG0ISFW1ZGGHIV3rs5CSFQlF92CYSqhr&language=en&details=true&metric=true`;

        const fetchPromise = await fetch(endpoint).catch((error) => {
            this.setState(state => ({
                forecasts: { 
                    ...state.forecasts, 
                    error, 
                    isLoaded:false 
                },
            })); 
        });

        if(fetchPromise){
            const result = await fetchPromise.json();
            this.setState(state => ({
                forecasts: {
                    ...state.forecasts,
                    error: null,
                    isLoaded:true,
                    forecasts:result.DailyForecasts
                },
            }));
        }
    }

    async getCurrentWeather(){
        const endpoint = `http://dataservice.accuweather.com/currentconditions/v1/207931?apikey=mG0ISFW1ZGGHIV3rs5CSFQlF92CYSqhr&language=en&details=true&metric=true`;

        const fetchPromise = await fetch(endpoint).catch((error) => {
            this.setState(state => ({
                currentForecast: {
                    ...state.currentForecast,
                     error, 
                     isLoaded:false 
                },
            }));
        });

        if(fetchPromise){
            const result = await fetchPromise.json();
            this.setState(state => ({
                currentForecast: {
                    ...state.currentForecast,
                    error: null,
                    isLoaded: true,
                    forecast: result
                },
            }));    
        }
    }
 

    componentDidMount(){
        const currentWeather = catchErrors(this.getCurrentWeather);
        const forecastedWeather = catchErrors(this.getForecastedWeather);

        currentWeather();
        forecastedWeather();
    }
    
    render() {
        return (
            <div className="weather-data">
                <WeatherOverview weather={this.state.forecasts} currentWeather={this.state.currentForecast} />
            </div>
        )
    }
}

export default App;