How to make a sequence of http requests in Angular 6 using RxJS
Solution 1
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)
Solution 2
I have faced same problem, this is my solution use pipe
and concatMap
for array for get sequence data for time period between start and end time.
This is general solution when we have array request.
I share for whom concern.
let currentReplayData = [];
let timerange = [[t1, t2], [t3, t4]]; // array of start and end time
from(timerange).pipe(
concatMap(time => <Observable<any>>this.dataService.getData(time[0],time[1]))
).subscribe(val => {
//console.log(val)
this.currentReplayData = this.currentReplayData.concat(val);
});
Solution 3
MergeMap
is exact what you are looking for
firstPOSTCallToAPI('url', data).pipe(
mergeMap(result1 => secondPOSTCallToAPI('url', result1)),
mergeMap(result2 => thirdPOSTCallToAPI('url', result2)),
mergeMap(result3 => fourthPOSTCallToAPI('url', result3)),
// ...
).subscribe(
success => {
// here you will get response of LAST request (fourthPOSTCallToAPI)
},
errorData => { /* display error msg */ }
);
// I assume that
// secondPOSTCallToAPI, thirdPOSTCallToAPI and fourthPOSTCallToAPI
// returns obserwable eg. return this.http.get<Book>(apiUrl);
Andi Aleksandrov
I'm a front-end developer. I've been working as a FE dev since 2012. Worked on many different projects. Currently interested in the MEAN stack.
Updated on January 18, 2022Comments
-
Andi Aleksandrov over 2 years
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.
-
mchl18 over 5 years
forkJoin
sends all at once AFAIK, usingconcat
ensures the previous one completes -
Andi Aleksandrov over 5 yearsThanks for the reply. I've looked into forkJoin but it doesn't look like a working solution since i need request2 to use response data returned from request1.
-
Sachin Shah over 5 yearsIn that case , forkJoin will not use. I suggest to check second link. It will work in you case.
-
Andi Aleksandrov over 5 yearsExactly what I was looking for!!! Thank you very much, you have ended my suffering!
-
Drenai almost 5 yearsIn the case above concatMap is not doing what you think it is. You could just have easily used a mergeMap here
-
Drenai almost 5 years@FanCheung It works fine, but if you replaced the
concatMap
in your example with amergeMap
orswitchMap
it will still work. Thewait until complete
aspect ofconcatMap
is only apparent if you are piping an observable that is streaming multiple data, whereas the firstPOSTCallToAPI only streams a single event, as does the second, third and fourth call -
Alan Smith almost 4 yearsYou beautiful human!! Got me out of a bind here. Thanks!
-
macawm about 2 yearsI found this very helpful. blog.angular-university.io/rxjs-higher-order-mapping