How can i wait for multiple async calls?

Question

I have multiply async calls. For example four of them

this.lazyLoadData();
this.lazyLoadData();
this.lazyLoadData();
this.lazyLoadData();

the problem is that every http request can take different time. In every request i am sending different query parameters to fetch paginated data on backend.

So in this case the first this.lazyLoadData can finish sometimes later then the second one - depending on the paginated results on the backend.

So to prevent that behaviour i tried to use async and await

await this.lazyLoadData();
await this.lazyLoadData();
await this.lazyLoadData();
await this.lazyLoadData();

async lazyLoadData(cb?) {
  const filtersParam: any = {
        page: this.filterService.dashboardPage,
        size: 25,
      }

      let response = await this.processMonitorService.monitoring(filtersParam);
      response.then(data => {
         console.log('maked http call');
      });
      ...
}

but the problem is that still, even i use async and await - this four http calls does not happen in order.

So in duration of one second i am calling four times lazyLoadData, i await every result there but responses does not come in order. So sometimes again third gets executed before the second one etc...

How can i solve this ?

https://stackoverflow.com/questions/45285129/any-difference-between-await-promise-all-and-multiple-await Use promise.all ? — Tushar Shahi, Jul 01 '21 at 12:41
What is really happening in `console.log('maked http call');`? If you have another promise there, then you should return it. You should anyway `await` a `then` call. — trincot, Jul 01 '21 at 12:43
What does `this.processMonitorService.monitoring` do? Are you sure it returns a promise, and if so, that it resolves when the HTTP call has received a response? — trincot, Jul 01 '21 at 12:51
It returned Observable, i needed to convert that - this.processMonitorService.monitoring.toPromise() so await will work — peco123, Jul 01 '21 at 13:02

score 0 · Answer 1 · answered Jul 01 '21 at 12:55

Why do you need them to be in order? Can't you have the required params in advance and then just use the results in order.

Of course, you can make them wait, but it would hurt the overall performance:

this.lazyLoadData().then(() => this.lazyLoadData())

and etc.

What would be better however is if you don't count on the state, but rather have the parameters come externally. E.g.:

await this.lazyLoadData(1);
await this.lazyLoadData(2);
await this.lazyLoadData(3);
await this.lazyLoadData(4);

Where the param is the page number.

By the way, what is the use case in general to make 4 requests? Can't you just request a page size of 100 if you need all 4 pages at the same time?

No, there is complex logix where they are done on java script scroll event, but anyway i need to do sometimes four in row — peco123, Jul 01 '21 at 13:01

score 0 · Answer 2 · answered Jul 01 '21 at 13:09

I think that the best way to do this is using Promise.all()

your code will look something like this:

    const arrayOfPromises = [
        this.lazyLoadData(1),
        this.lazyLoadData(2),
        this.lazyLoadData(3),
        this.lazyLoadData(4),
    ]

    Promise.all(arrayOfPromises).then((result) => {
        console.log(result) // this will contain the result of the 4 requests in order
    })

also, there is a bit of refactoring that you need to make in your code.

You lazyLoadData function becomes the following

    async lazyLoadData(cb ? ) {
        const filtersParam: any = {
            page: this.filterService.dashboardPage,
            size: 25,
        }

        return this.processMonitorService.monitoring(filtersParam);
    }

But with Promise.all if one http request fails, all of them will not be executed - i don't need that Heni — peco123, Jul 01 '21 at 13:14

score -1 · Answer 3 · answered Jul 01 '21 at 12:47

-1

You have to put your code in an async function:

(async()=>{
  await this.lazyLoadData();
  await this.lazyLoadData();
  await this.lazyLoadData();
  await this.lazyLoadData();
}());

answered Jul 01 '21 at 12:47

KAYZORK

337
1
3
17

Why use an immediately invoked function? This is literally the same thing as OP's original code, no? – tanndlin Jul 01 '21 at 12:50

How can i wait for multiple async calls?

3 Answers3