How can i get the data from async call in order?

Question

I am making http requests. When the request is done - with call back i am calling another function where the data from the async call is needed to make my logic. On every call of my http request in lazyLoadData i am making new page requests for data - so page 1 with 25 records, page 2 with the next 25 records from backend etc...

getData() {
   this.lazyLoadData(this.testing.bind(this));
   this.lazyLoadData(this.testing.bind(this));
}

lazyLoadData(cb?) {
  // MY HTTP REQUESTS
  let response = axios...
  cb && cb();
}


testing(data) {
  // my data arraived
}

if i call just once

this.lazyLoadData(this.testing.bind(this));

then everytjing works fine, when the http request is done, my callback - the testing functions is called and i get the data.

But when i make call for example

two or more times

getData() {
   this.lazyLoadData(this.testing.bind(this));
   this.lazyLoadData(this.testing.bind(this));
   this.lazyLoadData(this.testing.bind(this));
   this.lazyLoadData(this.testing.bind(this));
}

sometimes call 2 - the second this.lazyLoadData(this.testing.bind(this)); is executed quicker then the first and i get my data mixed up. Because after i make the http request and i get, i am pushing that values in one global array with which my table is filled up.

And the data is not in order, so sometimes array contains first the data 25 records from page 2, then page 1, page 3 etc...

How can i prevent this ?

Use `asyn-await`, for understanding refer https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function — AbhishekGowda28, Jun 14 '21 at 15:33
How my problem of calling four functions will be solved with async await ? I know of async await thing, but how with async await i will wait for each of the async requests called in same time ? — Petar, Jun 14 '21 at 15:37
You asked how to prevent, mixing of data. So one of the solution is to use async-await. With the use of asynchronous calls you can make the call in order and update the global array. — AbhishekGowda28, Jun 14 '21 at 15:40
Thank you for your answer. But i thought that with callback it is the same - just with async await the code is simpler. — Petar, Jun 14 '21 at 15:42
I wanted to know, why with callback this thing is not solved ? — Petar, Jun 14 '21 at 15:43
@Petar Because the callback defers only the `testing` call to happen after the respective http request, not the next `lazyLoadData` invocation. For that, you'd actually need to use `this.lazyLoadData(data1 => { this.testing(data1); this.lazyLoadData(data2 => { this.testing(data2); this.lazyLoadData(…); }); });` (which is ugly and better be solved with promises) — Bergi, Jun 14 '21 at 15:47
Does this answer your question? [How to return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call) — Matt Morgan, Jun 14 '21 at 15:50
@Bergi Tnx for your response. In my case - promises or async/await can solve my problem right ? What will be the difference if i use Promise.all over async await ? — Petar, Jun 14 '21 at 15:53
@Petar I don't follow. `await` is an alternative to `.then()` calls. You use `Promise.all()` when you have multiple promises for operations that were started to run concurrently. — Bergi, Jun 14 '21 at 16:17

score 0 · Answer 1 · answered Jun 14 '21 at 15:45

0

Yes, you cannot call them sequentially like that because HTTP requests speed depends on many factors.

You can use the async/await function to solve your problem.

the async keyword always returns a promise, so you could combine it with the await keyword to tell Javascript to wait for your promise to be either resolved or rejected.

So for your code you could do something like this

async function lazyLoadData(){
  //http requests
}

in the getData, you could simply :

   function getData(){
        // with this, the firstResponse variable will wait for the first call of lazyLoadData to be completed then assigned the value to itself 
        // before the execution move to the second call of the function
        let firstResponse = await lazyLoadData(yourparam)
        let secondResponse = await lazyLoadData(yourparam)
    }

You might also want to read about Promise.all, as it could be an alternative to my solution.

answered Jun 14 '21 at 15:45

sushitrash

174
1
8

Tnx for your response. In my case - promises or async/await can solve my problem right ? What will be the difference if i use Promise.all over async await ? – Petar Jun 14 '21 at 15:54
it actually depends on how you want your app to behave, like do you want to wait for all of the 4 functions to be completed first before assigning them to an array, or do you want to add any response to the array as soon as the request is completed? in the end both approaches are correct and similar to each other, but maybe If you want a cleaner code you can go with the Promise.all approach because you don't have to append the response multiple times to the array. – sushitrash Jun 14 '21 at 15:59
async and await did not solved my problem. I have the same problem here – Petar Jul 15 '21 at 13:32

How can i get the data from async call in order?

1 Answers1