Synchronous fetch - ReactJS

Question

In a function I loop, in which I’m making fetch calls. When all calls are finished, I need to save the values in a variable, but that’s not being possible for me to be asynchronous to the calls.

getReportsGroup(bukrs){
        
    //TOTAL OF A PROJECT GROUP
    fetch('api/Reports/GetDataIRPA?SETCLASS=' + this.state.SETCLASS, {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
       this.setState({
           reportIRPA: data
       });
     });
}

getTotalProjects(){
   //Browse selected projects
   for (var i = 0; i < this.state.selectProjects.length; i++) {
       this.getReportsGroup(this.state.selectProjects[i].bukrs);
   }
    
   console.log('finish all fetch');
}

The getTotalProjects function is performing a loop in which getReportsGroup is called (fetch is made here). At the end of all fetchs I need to display a message in getTotalProjects. Currently, being asynchronous, it performs the console.log('finish all fetch') before finishing all fetch.

You need promise.all instead of looping all promises. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…. If not understand let me know i will add code for this — Shubham Verma
– Shubham Verma, Commented Oct 14, 2019 at 8:55
You're saving the data from each fetch to the same state property, basically overriding the data from the previous fetch. That can't be what you want...? — Andy
– Andy, Commented Oct 14, 2019 at 9:03

voltento · Accepted Answer · 2022-01-25 08:45:55Z

4

You can use another library

    const request = new XMLHttpRequest();
    request.open('GET', '/api/<your_api>', false);  // `false` makes the request synchronous
    request.send(null);
    if (request.status !== 200) {
      // handle an error here
      return
    }

    const data = JSON.parse(request.responseText);

answered Jan 25, 2022 at 8:45

voltento

90713 silver badges27 bronze badges

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

1 Comment

Shubham Gupta - TCH Over a year ago

This answer solved the problem I was having. Working great for me, thanks

Community · Accepted Answer · 2021-12-05 05:35:04Z

You need to wait until promise resolved. Return promise in first method and apply .then in second

getReportsGroup(bukrs){

    //TOTAL OF A PROJECT GROUP
    return fetch('api/Reports/GetDataIRPA?SETCLASS=' + this.state.SETCLASS, {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
       this.setState({
           reportIRPA: data,
       });
     });
}

getTotalProjects(){
   //Browse selected projects
   var promises = []; //array of promises
   for (var i = 0; i < selectProjects.length; i++) {
       var promise = this.getReportsGroup(selectProjects[i].bukrs); //single promise
       promises.push(promise);
   }
   Promise.all(promises ).then(function() {
      console.log("DISPLAY your Message here"); // display here
  });
   console.log('finish all fetch');
}

MubashirEbad · Accepted Answer · 2019-10-14 09:07:40Z

0

You can convert your code into promises and use promises instead of direct Fetch calls. Covert each call into a promises and use promise.all() to execute them all together. Which will work when all the promises are resolved.

answered Oct 14, 2019 at 9:07

MubashirEbad

2891 silver badge7 bronze badges

Collectives™ on Stack Overflow

Synchronous fetch - ReactJS

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related