Как заставить реагировать на ожидание получения данных api - PullRequest
Новая
       4

Как заставить реагировать на ожидание получения данных api

0 голосов
/ 09 мая 2020

Я получаю данные из API (используя ax ios) каждые 15 минут и отображаются в таблице. Однако пользовательский интерфейс не ждет, пока будут получены данные 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>

                    ...

Может ли кто-нибудь помочь, если есть какая-то ошибка в способе вызова с использованием ax ios asyn c. Заранее спасибо!

1 Ответ

2 голосов
/ 09 мая 2020

Вам не нужно вызывать .then, если вы используете async / await, попробуйте: 

const response = await axios.get(url);

this.setState({ appsDataApi: response.data }, () => {
  console.log(this.state.appsDataApi)
});

Вы также можете выполнить рефакторинг строки запроса, например: 

const { data } = await axios.get(url);

И используйте его как appsDataApi: data.

Update

Если вы хотите скрыть контент до тех пор, пока не поступит запрос, вы можете сделать что-то подобное: 

render() {
  return (
    {
      this.state.appsDataApi ?
        // insert your content here
      :
        // add a loader or an empty div here
    }
  )
}

Определите appsDataApi как null в состоянии по умолчанию.

...