ReactJS: How to return object asynchronously after fetching data in loop?

Question

I have a react function as shown below:

const requestSideBarData = (state, request) => {

    let newState = state;
    Object.keys(newState.data).forEach(element => {
         axios.post(`${ApiEndPoints.getDropDownHeaders}${element}`,request)
        .then(response => {
            newState.data[element] = response.data;
        })
        .catch(e => {
            console.log(e);
            
        });
    });
    return newState;

};

I want to return the newState after all the post response has been recieved and newState has been updated. How should I go about it? Since the function runs syncly it returns the same state without letting axios complete its response.

Try making requestSideBarData function async and await on Foreach loop. A promise can be a great alternative as well. — Dhruvi Makvana
– Dhruvi Makvana, Commented Oct 30, 2020 at 6:58

topdev87 · Accepted Answer · 2020-10-30 07:10:13Z

2

Use Promise.all

const requestSideBarData = async(state, request) => {

    let newState = state;
    const promises = [];
    Object.keys(newState.data).forEach(element => {
        promises.push(axios.post(`${ApiEndPoints.getDropDownHeaders}${element}`,request))
    });
    const results = await Promise.all(promises);
    var index = 0;
    Object.keys(newState.data).forEach(element => {
        newState.data[element] = results[index++].data;
    })
    return newState;

};

edited Oct 30, 2020 at 7:10

answered Oct 30, 2020 at 6:58

topdev87

8,7913 gold badges11 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

topdev87 Over a year ago

i just updated the answer newly, try with the updated one.

Akash Sarode · Accepted Answer · 2020-10-30 07:10:00Z

try this,

const requestSideBarData = async (state, request) => {
  let newState = state;
  for(let element in Object.keys(newState.data)) {
    try {
      let response = await 
        axios.post(`${ApiEndPoints.getDropDownHeaders}${element}`,request);
      newState.data[element] = response.data;
    } catch(e) {
      console.log(e);
    }
  }
  return newState;
};

now that you've declared requestSideBarData body to be async, it will automatically return a promise, and you'll need to deal with it when calling the function.

I've also replaced forEach loop with for...in because forEach loop cannot run async by default. Now in every iteration loop will await the axios.post.

Ideally, you shouldnt await on every async function when you have a lot of them. see William Wang's answer to make all requests asynchronously and await on them all at once.

Mohammed Imran · Accepted Answer · 2020-10-30 07:13:36Z

1

You can do something like this.

const requestSideBarData = (state, request) => {
    let newState = state;
    try {    
        Object.keys(newState.data).forEach(async (element) => {
        const url =`${ApiEndPoints.getDropDownHeaders}${element}`;

        cosnt {data} = await axios.post(url,request);
        newState.data[element] = data;
        } catch(e) {
            console.log(e);
        }
    });
    return newState;
};

answered Oct 30, 2020 at 7:13

Mohammed Imran

771 silver badge8 bronze badges

1 Comment

Akash Sarode Over a year ago

async callback to forEach would not work as expected. that's why you use for...in loop

Collectives™ on Stack Overflow

ReactJS: How to return object asynchronously after fetching data in loop?

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related