Call methods in sequence Angular 12

Question

I have three methods say method1, method2 and method3 which are implemented in three different services. Please note that these three methods use httpClient in turn. (i.e. they return Observable). method2 is called from different places. In one of the place, I want to call method2 after method1 and method3 is completed.

How can I achieve this using Rxjs Subject or any other technique?

Answer 1

I have three methods, method1, method2 and method3 which are implemented in three different services.

export class Service1 {
  // [...]
  method1(){
    // [...]
  }
}
export class Service2 {
  // [...]
  method2(){
    // [...]
  }
}
export class Service3 {
  // [...]
  method3(){
    // [...]
  }
}

method2 is called from different places.

The first place:

Service2.method2();

In one of the place, I want to call method2 after method1 and method3 is completed.

Service3.method3();
Service1.method1();
// called method 3 and method 1
Service2.method2();

OR

Service1.method1();
Service3.method3();
// called method 1 and method 3
Service2.method2();

Answer 2

Several operators allow you to execute observables in sequence.

The concat operator allows you to execute one observable and switch to the next after it completes. This will produce three emissions:

concat(service1.method(), service3.method(), service2.method())
  .subscribe(x => console.log(x));
// outputs:
// service1 method result
// service3 method result
// service2 method result

If you want only a single emission when to occur after all complete, then you can use the toArray operator.

concat(service1.method(), service3.method(), service2.method())
  .pipe(toArray())
  .subscribe(x => console.log(x));
// output: [service1 method result, service3 method result, service2 method result]