如何等待多个异步调用？

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 ?

Answer 1

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. Eg:

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?

Answer 2

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);
    }

Answer 3

You have to put your code in an async function:

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