如何做出反应以等待检索到api数据

我每15分钟从API（使用axios）检索数据，并显示在表格中。但是，UI不会等到提取api数据。我在做什么错？请找到下面的代码。

const INTERVAL_DURATION = 15 * 1000 * 60;


class ApplicationDashboard extends Component {


    state = {
        defaultEnv: 'DIT',
        appsToShow: [],
        appsDataApi: [],
        env: 'DIT',
        selectedEnvs: 'DIT'
    };

    // on change of environment
    handleEnvClick = (selectedButton) => {
        this.setState({
            selectedEnvs: selectedButton
        }, () => {
            this.getAppDataByEnv(this.state.selectedEnvs);
        });
    }

    getAppDataByEnv = (selectedEnv) => {
        console.log("selected env " + selectedEnv);

        this.setState({
            defaultEnv: selectedEnv
        }, () => {
            this.setState({
                appsToShow: this.state.appsDataApi.filter(app => app.env === selectedEnv)
            });
        });
    }

    componentDidMount() {
        this._fetchAppsByIntervals = setInterval(this.getAppHealthDataFromES(), INTERVAL_DURATION);
        this.getAppDataByEnv(this.state.defaultEnv);
    }

    componentWillUnmount() {
        // clearInterval(this._fetchAppsByInterval);
        clearInterval(this._fetchAppsByIntervals);

    }

    getAppHealthDataFromES = async () => {

        const BASE_URL = 'http://localhost:8080';
        const url = `${BASE_URL}/log/v1/appinfo`;
        await axios.get(url).then(response => response.data)
            .then((data) => {
                this.setState({
                    appsDataApi: data
                })
                console.log(this.state.appsDataApi)
            });
    }

    render() {
            return ( <
                    div className = "app-dashboard-main-div" >
                    <
                    div className = "app-dashboard-container" >
                    <
                    div className = "app-dashboard-table-env-main" >
                    <
                    div className = "app-dashboard-label" >
                    Applications <
                    /div>

                    <
                    div className = "EnvGroupButtonsMain" >
                    <
                    button onClick = {
                        () => this.handleEnvClick("DIT")
                    }
                    className = {
                        `${this.state.selectedEnvs==='DIT'?'activeEnv':'inActiveEnv'}`
                    } > DIT < /button> <
                    button onClick = {
                        () => this.handleEnvClick("FIT")
                    }
                    className = {
                        `${this.state.selectedEnvs==='FIT'?'activeEnv':'inActiveEnv'}`
                    } > FIT < /button> <
                    button onClick = {
                        () => this.handleEnvClick("IAT")
                    }
                    className = {
                        `${this.state.selectedEnvs==='IAT'?'activeEnv':'inActiveEnv'}`
                    } > IAT < /button> <
                    button onClick = {
                        () => this.handleEnvClick("PROD")
                    }
                    className = {
                        `${this.state.selectedEnvs==='PROD'?'activeEnv':'inActiveEnv'}`
                    } > PROD < /button> <
                    /div>

                    ...

如果使用axios async进行调用的方式出现错误，请有人帮忙。提前致谢！