'Is it good to call subscribe inside subscribe?

I need to pass three data to one function from three different APIs:

this.service.service1().subscribe( res1 => {
  this.service.service1().subscribe( res2 => {
    this.service.service1().subscribe( res3 => {
      this.funcA(res1, res2, res3);
  });
  });
});

Is it a good practice to subscribe inside a subscribe?

Solution 1:^[1]

Though all of the above help provide solutions to this particular problem none of them seem to address the obvious underlying problem here, specifically:

Is it good way to call subscribe inside subscribe?

tl;dr

No it is not good to call a subscribe inside a subscribe.

Why?

Well because this is not how functional programming is supposed to work. You're not thinking functionally you're thinking procedurally. This isn't necessarily a problem per se, but the whole point of using rxjs (and other reactive programming extensions) is to write functional code.

I'm not going into all the details on what functional programming is but essentially the point of functional programming is to treat data as streams. Streams that are manipulated by functions, and consumed by subscribers. As soon as you add a subscribe inside another subscribe your manipulating data inside a consumer (not inside a stream). So your functional stream is now broken. This prevents other consumers from utilising that stream further down stream in your code. So you've turned your functional stream into a procedure.

Image source, above and more information on pure functional programming here.

Solution 2:^[2]

You can use forkJoin to combine the Observables into a single value Observable

forkJoin(
  this.service.service1(),
  this.service.service2(),
  this.service.service3()
).pipe(
  map(([res1, res2, res3 ]) => {
    this.funcA(res1, res2, res3);
  })

Solution 3:^[3]

If the calls can be resolved in parallel you could use forkJoin, like this:

joinedServiceCalls() {
   return forkJoin(this.service1(), this.service2(), this.service3());
}

And then subscribe to that method. https://www.learnrxjs.io/operators/combination/forkjoin.html

Solution 4:^[4]

Looks strange, I would go this way because it looks cleaner:

async myFunction () {
//...
const res1 = await this.service.service1().toPromise();
const res2 = await this.service.service2().toPromise();
const res3 = await this.service.service3().toPromise();
this.funcA(res1, res2, res3);
//...

}

EDIT

or to do it in parallel

async myFunction () {

//...
let res1;
let res2;
let res3;
[res1,res2,res3] = await Promise.all([this.service.service1().toPromise(),
                                      this.service.service2().toPromise(),
                                      this.service.service3().toPromise()]);
this.funcA(res1, res2, res3);
//...

}

Solution 5:^[5]

You can use the zip RxJs operator, and then in this case you will only use just one subscribe.

You can then call your function inside that subscribe because all the results are available.

Observable.zip(
  this.service.service1(),
  this.service.service1(),
  this.service.service1()
).subscribe([res1, res2, res3]) {
  this.funcA(res1, res2, res3);
}

Solution 6:^[6]

as mentioned, forkjoin is a good solution, but it emit completed calls only. If these are values that are going to be emitted repeatedly, use I would combineLatest.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Philippe Fanaro
Solution 3	Diego Pedro
Solution 4
Solution 5
Solution 6	user856510

'Is it good to call subscribe inside subscribe?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]