what's the proper async/await implementation for this scenario?

Question

I have a React component that has functions similar to this:

async getDataSet1(url, config){
        axios.get(url, config)
            .then(function(response){
                if(response.data.length > 0){
                that.setState({ dataSet1: response.data });
                }
            })
            .catch(function (error) {    
                alert('bubble: ' + error.message);
            });
}

async getDataSet2(){
        axios.get(url, config)
            .then(function(response){
                if(response.data.length > 0){
                that.setState({ dataSet2: response.data });
                }
            })
            .catch(function (error) {    
                alert('bubble: ' + error.message);
            });
}

async processData(){
      await getDataSet1();
      await getDataSet2();

      const{
         dataSet1,
         dataSet2,
      } = this.state;
}

The processData() function needs to get 2 datasets via getDataSet1() and getDataSet2(). Is the rule with await/async that:

• async functions to be called with await must have async keyword as part of async function definition
• functions which call async functions must have async keyword as part of async function definition

If I need to call processData() in this scenario from an onClick() event handler then how would I need to structure that call? The following structure does not appear to be valid:

onClick={() => await this.processData()}

What is the proper way to structure my code above to achieve what I'm trying to do? My current implementation does not appear to be working as expected.

Answer 1

There are few issues in concern here.

First, you have asked it to wait for response returned from getDataSet1 , but you are not returning anything from the function. So the response is undefined and is returned immediately. To make this work return the promise that axios is returning:

async getDataSet1(url, config){
        return axios.get(url, config)
            .then(function(response){
                if(response.data.length > 0){
                  return response.data
                }
            })
            .catch(function (error) {    
                alert('bubble: ' + error.message);
            });
}

You might have noticed that I have also removed setState from the function. This is because setState is an async function and does not return a promise, so you cannot await on it. So instead we have to return the result and act on it.

async processData(){
      const dataset1 = await getDataSet1();
      const dataset2 = await getDataSet2();
      // If you want to set it to state.
      this.setState({ dataset1, dataset2 });
}

Second, await needs to be used only if the statement below it depends on the result of it. With this logic, the onClick function does not need it, you can just call the function and let it work out it's magic in async.

onClick={() => this.createStructuredBolData()}