score:1

async retrieveconfigparameters() {
    const servicecommand = new getservicecommand()
    const invoker = new serviceinvoker(servicecommand, urls.get_config_parameters)
    const returndata = await invoker.executerequest()

    this.setstate({
        items: returndata
    }, function() {
        console.log(this.state.items)
    });  

    console.log(this.state.items)
}


export class getservicecommand implements iservicecommand {
returndata = [] as any
execute(serviceurl: string): object {
    return axios.get(serviceurl).then(results => {
        results.data.foreach((element: any) => {
            this.returndata.push(element)
        });
        return this.returndata;
    })
}

score:1

follow these steps.

  1. call axios from componentwillmount()
  2. add a property in ur state isloading: true
  3. when fetching completed then just change isloading: false

logic is : if (isloading) ? 'loading' : render()

score:2

the problem is that axios call is not synchronous meaning just after axios.get is executed the complier goes to next line which is:

console.log(this.returndata)
return this.returndata // [] empty array

so in order to get the correct result, make sure you return when you get response from axios:

export class getservicecommand implements iservicecommand {
returndata = [] as any
execute(serviceurl: string): object {
    // return the promise itself
    return axios.get(serviceurl).then(results => {
        console.log(results.data)
        results.data.foreach((element: any) => {
            this.returndata.push(element)
        });
        // move return to here
        return this.returndata
    })
}

Related Query

More Query from same tag