How to make a sequence of http requests in Angular 6 using RxJS

Andi Aleksandrov

I've been looking for a solution all over the web, but couldn't find anything that fits my user case. I'm using the MEAN stack (Angular 6) and I have a registration form. I'm looking for a way to execute multiple HTTP calls to the API and each one is dependent on the returned result from the previous one. I need something that looks like this:

firstPOSTCallToAPI('url', data).pipe(
    result1 => secondPOSTCallToAPI('url', result1)
    result2 => thirdPOSTCallToAPI('url', result2)
    result3 => fourthPOSTCallToAPI('url', result3)
    ....
).subscribe(
    success => { /* display success msg */ },
    errorData => { /* display error msg */ }
);

What combination of RxJS operators do I need to use to achieve this? One possible solution would be to nest multiple subscriptions, but I want to avoid that and do it better with RxJS. Also need to think about error handling.

Fan Cheung

For calls that depend on previous result you should use concatMap

firstPOSTCallToAPI('url', data).pipe(
    concatMap(result1 => secondPOSTCallToAPI('url', result1))
      concatMap( result2 => thirdPOSTCallToAPI('url', result2))
       concatMap(result3 => fourthPOSTCallToAPI('url', result3))
    ....
).subscribe(
    success => { /* display success msg */ },
    errorData => { /* display error msg */ }
);

if your async method does not depend on return value of the precedent async call you can use

   concat(method(),method2(),method3()).subscribe(console.log)

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Angular/RxJS 6: How to prevent duplicate HTTP requests?

Angular6 how to test a sequence of http requests

How to make http requests using HTTP Intercepters

RxJS batch HTTP requests in Angular

Angular Testing - Chained HTTP Requests using rxjs switchMap

How to make sure that $http requests are executed in sequence inside loop

How to use RxJS to cancel previous HTTP Requests in an Angular Service

How to make HTTP requests using Plink

How to use ForkJoin for sequence of http requests Angular 4

how to make multiple http calls synchronously at different levels in angular 2 using rxJS

RxJS how do I make POST requests in sequence where a new request is fired only when the previous completed?

RxJs - How to implement parallel HTTP requests when you have a variable number of requests to make

Angular - Correctly using RXJS expand operator to make recursive http calls

How To Limit Concurrent API Requests In Angular Using RxJs

Angular 4 / RxJS, send HTTP of an array in sequence

How to make Http request in a angular 6 service

Retry HTTP requests in angular 6

Making two http requests sequentially in angular, rxjs

Angular RxJS Nested Subscribe with multiple Http Requests

Angular rxjs call http requests in batches with a delay

Angular and RxJs combine two http requests

angular rxjs: handle multiple http requests

Handling two HTTP requests (Angular + RxJS)

Angular5 RXJS recursive http requests

Make concurrent requests using rxjs mergeMap() is sequential

Cache Http requests using only RxJS operators

How to make CORS-enabled HTTP requests in Angular 2?

How to make HTTP requests in angular and get the body from the object?

Angular 4 - How to make bulk http syncronous requests