How to synchronically call methods after another method in Angular?

Question

I have to call some methods synchronically in ngOnInit() method, but all of them make some asynchronous calls to an API from the inside. Some variables are setted in the first method, and the second and the third methods need these variables to be already setted. I can't use rxjs mapping operators (mergeMap, switchMap, concatMap, exhaustMap) since the calls are made from separated methods that make other operations.

This is what I have:

public taskTypes: any; // variable to be setted in first method
public firstDataSource: any;
public secondDataSource: any;
// some other variables to be setted in first method

constructor(...) {
  this.taskTypes = [];
  this.firstDataSource = [];
  this.secondDataSource = [];
  // some other initializations
}

ngOnInit() {
  this.getTaskTypes();
  this.methodOne();
  this.methodTwo()
}

public getTaskTypes(): void {
  this.http.get("url").subscribe(
    (res) => {
      this.taskTypes = res.tasks;
      // some other operations with response data
      // and set other variables
    },
    (err) => {}
  );
  // some other operations with variables
}

public methodOne(): void {
  if (this.taskTypes.length > 0) {
    this.http.get("url/" + 1).subscribe(
      (res) => {
        this.firstDataSource = res.data;
      },
      (err) => {}
    );
  }
  // some other operations with variables
}

public methodTwo(): void {
  if (this.taskTypes.length > 0) {
    this.http.get("url/" + 2).subscribe(
      (res) => {
        this.secondDataSource = res.data;
      },
      (err) => {}
    );
  }
  // some other operations with variables
}

My problem is that with the call of ngOnInit(), all inner methods are called at the same time and the result of the condition: this.taskTypes.length > 0 is always false because the variable taskTypes has not been setted by the time when methodOne() and methodTwo() are called, so firstDataSource and secondDataSource never get setted with the respective calls to the API. That's why I need methodOne() and methodTwo() to be called synchronously after getTaskTypes().

Answer 1

Of course you CAN do that with rxjs

this.http.get("url").pipe(
    map(res => res.tasks),
    filter(taskTypes => taskTypes.length > 0),
    switchMap(taskTypes => combineLatest([this.http.get("url/" + 1), this.http.get("url/" + 2)])),
  ).subscribe(
   ([methodOneResult, methodTwoResult]) => console.log(methodOneResult, methodTwoResult),
  );

Have an example here: https://stackblitz.com/edit/angular-jevauk

Answer 2

First change your methods to return observable only e.g

public getTaskTypes():Observable<any> {
 return this.http.get("url");
}

Then use concat to execute them sequentially, and toArray() to convert result to an array

 concat(this.getTaskTypes(),this.methodOne(),this.methodTwo())
 .pipe(toArray()).subscribe(res=>console.log(res))

res will contain all results in a array in execution order.

Answer 3

You should use the concept of Promise and Then, or async await. For example, your ngOnInit should be like this:

async ngOnInit() {
  await this.getTaskTypes();
  await this.methodOne();
  await this.methodTwo()
}

By using await, methodOne will wait until getTaskTypes be resolved. But keep that in mind, await only works if your function returns a Promise or an Observable. In this case, because your functions do not return anything, await won't work. So, for example getTaskTypes should be like this:

public async getTaskTypes(){
  return new Promise(resolve, reject) => {
      this.http.get("url").subscribe(
      (res) => {
        this.taskTypes = res.tasks;
        resolve();
        // some other operations with response data
        // and set other variables
      },
      (err) => {
        reject(err);
      }
    );
    // some other operations with variables
  });
}

Of course there are better approaches to solve this, but I tried to make you understand the main ideas. You can read more about it in here.