Angular 2 - Chaining http requests

Question

I get a RxJS Observable from an httpService which is the actual http from Angular. Now as soon as I get a postive result from that, I want to process the next http Request which I get from this.retrieve(). This is more or less concattening requests. Is there a better way of doing it?

return this.httpService.query(data) 
        .map(data => {
            if(data.status > 1)
               this.retrieve().subscribe();
            return data;
});

seidme · Accepted Answer · 2019-12-02T13:55:43.443

23

Chaining HTTP requests can be done using flatMap or switchMap operators. Say we want to make three requests where each request depends on the result of previous one:

this.service.firstMethod()
    .flatMap(firstMethodResult => this.service.secondMethod(firstMethodResult))
    .flatMap(secondMethodResult => this.service.thirdMethod(secondMethodResult))
    .subscribe(thirdMethodResult => {
          console.log(thirdMethodResult);
     });

This way you can chain as much interdependent requests you want.

UPDATE: As of RxJS version 5.5 pipeable operators were introduced and the syntax has slightly changed:

import {switchMap, flatMap} from 'rxjs/operators';

this.service
  .firstMethod()
  .pipe(
    switchMap(firstMethodResult => this.service.secondMethod(firstMethodResult)),
    switchMap(secondMethodResult => this.service.thirdMethod(secondMethodResult))
  )
  .subscribe(thirdMethodResult => {
      console.log(thirdMethodResult);
    });

edited Dec 02 '19 at 13:55

answered Mar 06 '17 at 13:16

seidme

12,543
5
36
40

2

That's brilliant. Thank you very much! – Trevor Hector Mar 06 '17 at 13:19
1

Also see `switchMap()` - [switchMap - learn-rxjs](https://www.learnrxjs.io/operators/transformation/switchmap.html) – P. Moloney Mar 06 '17 at 13:37
1

How can i combine the return of all the requests and return that as the result? – Astronaut Jun 27 '18 at 13:46
Where do you import flatMap from? – Aubrey Quinn Nov 29 '19 at 15:19
import {switchMap, flatMap} from 'rxjs/operators'; – seidme Dec 02 '19 at 12:39
But what if the requests aren't dependent and we just need to execute them one after the other? Also, flatMap is now deprecated and renamed to mergeMap. – Srdjan Pazin Sep 24 '21 at 09:12
@SrdjanPazin If you need to execute them one after the other that means they are interdependent? If you need to execute them in parallel then look for .forkJoin operator – seidme Sep 24 '21 at 12:12

Angular 2 - Chaining http requests

1 Answers1

Linked

Related