Async call to API inside a loop in Angular

user_1288771 0
Viewed 53

I have the following code:

  for (let member of this.pendingBilling) {
                      //start billing
                      let payLoad: any = {};
                      payLoad.credentials = this.credentials
                      payLoad.data = {
                        memberid: member.memberid,
                        payid: member.payid
                      }
                      var APIURL = globals.endpoint + "members/rb";
                      let options = { headers: new HttpHeaders().set('Content-Type', 'application/json') };
                      let body: any = payLoad;
                      this.httpClient.post(APIURL, JSON.stringify(body), options).subscribe(
                        result =>  {
                          let apiResponse: any = result;
                          if (apiResponse.success == 1) {
                            member.status = apiResponse.status
                            member.amount = apiResponse.amount
                          }
                          if (apiResponse.success == 0) {
                            member.status = apiResponse.status
                          }
                        },
                        error => {
                          member.status = 91
                        });
                        
                      //end billing
}

The problem Im facing is that they all run almost at the same time (simultaneously), while I would like to run a httpClient.post, wait for the response, and then run the next record.

I had this code inside a

processBilling(): void  {}

But this does not work even by deleting void

processBilling(): {}

The question is, is it possible for the loop to wait for the httpClient.post response and then move to the next record?

Thanks.

angular typescript
2 Answers

you could use promises and chain them


let promiseChain = Promise.Resolve();
let apiUrl: string = `${globals.endpoint}members/rb`;

this.pendingBilling.foreach( ( billingData ) => {
    let payload : any = {
        credentials: this.credentials,
        data: {
            memberid: billingData.memberid,
            payid: billingData.payid
        }
    };
    let options = { headers: new HttpHeaders().set('Content-Type', 'application/json') };
    let body: any = payLoad;
    promiseChain = promiseChain.then( () => {
        return new Promise( (res, rej ) => { 
            this.httpClient.post(APIURL, JSON.stringify(body), options).subscribe( 
            result => {
                let apiResponse: any = result;
                if (apiResponse.success == 1) {
                    member.status = apiResponse.status
                    member.amount = apiResponse.amount
                }
                if (apiResponse.success == 0) {
                    member.status = apiResponse.status
                }
                res();
            },
            error => {
                member.status = 91
                rej();
            });
    });
});
user_44033760

This may not the best solution, but it may work for you as it did for me in the past. I had a similar issue for sending emails through SendGrid, so I placed a delay of 500ms in between calls.

  delay(ms: number) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }

And then

for (let member of this.pendingBilling) {
                      //start billing
                      ....
                      ....
                      ....
                      await this.delay(500) 
                      //end billing
}
user_148677490
Related