Angular - how to chain multiple calls

Question

In my angular 7 application, I need to chain multiple HTTP Get call and for any call I need to wait for the call before to be completed also if I don't need to use directly the response in the next call.

I don't want to use subscribe inside a subscribe and so on because the code is very bad.

So for example, if I have 4 functions what is the best practice to achieve it?

You are looking for RxJS switchMap if you want to use the result form the first request in the second request and so on. Use combineLatest or forkJoin if you simply want to await all requests to finish. — CaKa
– CaKa, Commented Feb 13, 2019 at 13:44
Check if how to call a function after the termination of another function in angular helps — SiddAjmera
– SiddAjmera, Commented Feb 13, 2019 at 13:44

Shashank Vivek · Accepted Answer · 2019-02-13 13:49:35Z

4

Try forkJoin:

linkContractToDepartment(data): Observable<any> {
        return this.httpClient.get<any>(
            '/something/link-contract',
            data
        );
}

calls = [];
calls.push(this.linkContractToDepartment(1));
calls.push(this.linkContractToDepartment(2));


forkJoin(calls).subscribe(response_list=> { console.log(response_list) })

edited Feb 13, 2019 at 13:49

answered Feb 13, 2019 at 13:45

Shashank Vivek

17.6k9 gold badges69 silver badges110 bronze badges

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

5 Comments

CaKa Over a year ago

From the question to me it is unclear if he wants to await multiple requests or if he wants to use the result from the first call in the second call. For the second case, switchMap should be used.

Shashank Vivek Over a year ago

@CanK. : he has said I don't need to use directly the response in the next call. so there is no dependency of responses, so we can call all at once

AVJT82 Over a year ago

@ShashankVivek I think it's pretty clear that switchmap needs to be used... "I need to wait for the call before to be completed, ALSO if I don't need to use directly the response in the next call."

AVJT82 Over a year ago

I guess it would have been more clear if OP had written even if I don't need to use... But English isn't everyone's native or second language :)

Alessandro Celeghin Over a year ago

Sometimes I need to use the response of the precedent call but often I don't need it, I also need all the response in the last subscribe so I can elaborate all

Laurent · Accepted Answer · 2019-02-13 14:07:51Z

1

Like other said, Angular works perfectly with RxJS. But the official doc is a bit confuse. Try to find real world example with angular AND RXJS. Example : https://blog.angularindepth.com/practical-rxjs-in-the-wild-requests-with-concatmap-vs-mergemap-vs-forkjoin-11e5b2efe293

Learn rxjs is another nice ressource for RxJS

To resume:

To avoid subscribe of subscribe use Observable.
If multiple async call are independent use forkJoin
If an async call need previous async query use mergeMap
if async call need multiple async query use combineLatest

answered Feb 13, 2019 at 14:07

Laurent

1,0582 gold badges16 silver badges16 bronze badges

Collectives™ on Stack Overflow

Angular - how to chain multiple calls

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related