How to call multiple http requests parallel and handle errors individually

Question

I have 4 functions similar to the one below. Right now I'm calling them one at a time on ngOnInit() but I'm looking for a cleaner way to call all 4 functions (GET HTTP Requests) so that they show spinner... all run parallel... and then close spinner and handle any errors. This is for a project using angular 7.

 getCustomers() {
      return this.apiService.getCustomers()
        .subscribe(
          (data: any) => {
            this.partners = data;
            this.loading = false;
          },
          error => {
            console.log(error);
            this.loading = false;
          }
        );
  }

Technically they all run in parallel already, except they're triggered one after another. Because it's a .subscribe() function, it doesn't stop the rest of the code execution. Are you trying to show a spinner when something does an HTTP call on your webapp? — Prav
– Prav, Commented Jul 19, 2021 at 20:07
For the error, I'd personally handle them in the service function (apiService.getCustomers() in this case). I've answered a similar question here stackoverflow.com/questions/46018259/…, 90% it still applies except for the map(), which you don't need to do if your classes match the response JSON structure. Angular has data casting support now. — Prav
– Prav, Commented Jul 19, 2021 at 20:12

Ayman Ali · Accepted Answer · 2021-07-19 21:33:40Z

7

You need to combine all observables from your service into a single observable and then subscribe to the newly created observable. to do this you can use RxJs operator forkJoin

the fork join subscription will wait for all observables to complete and then emit the values to the subscription method -note that mean single success and single error for all since the observable will only emit once

you can also use RxJs Operator combineLatest this will create single observable from your list of observers and emit a value every time one of the observables complete. the value will be array of all last values emmited from your observers or null in case an observer not finished. this will allow you to handle error state for each api call but will also fire the subscription event multiple times.

answered Jul 19, 2021 at 21:33

Ayman Ali

5674 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joe Starnes Over a year ago

Ok thanks... I will start looking into forkjoin.

Collectives™ on Stack Overflow

How to call multiple http requests parallel and handle errors individually

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related