I am dealing with multiple asynchronous calls, specifically four of them.
this.lazyLoadData();
this.lazyLoadData();
this.lazyLoadData();
this.lazyLoadData();
The issue arises because each HTTP request may take a different amount of time. Additionally, I am sending different query parameters for fetching paginated data from the backend in each request.
As a result, the first this.lazyLoadData may sometimes finish later than the second one, depending on the response times from the backend.
To address this problem, I attempted to implement the use of 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('made http call');
});
...
}
However, even with async and await, the four HTTP calls still do not occur in order as expected.
When calling lazyLoadData four times in the span of one second and awaiting each result, the responses do not come back in the correct sequence. Sometimes, the third request is executed before the second, and so on.
How can I resolve this issue?