How to wait for function with subscribe to finish in angular 8?

Question

I want to wait for one function to finish before executing the function next to it. I have one function called getData() in which http call occurs which returns an observable. The second function checkDuplicate() we have subscribed to that function getData() . and we have third function called proceed() in which we call the checkDuplicate() function and once the checkDuplicate() function is completed, we are calling alert("finished"). But the issue here is even before checkDuplicate() function is completed, alert has been triggered.

find the code for better clarification:

getData(): Observable<any>{
  return this.http.get<any>(URL...);
}

checkDuplicate(){

return this.getData().subscribe(response => {
   if(response){
      console.log("Inside");
  }
});
}

proceed(){
 this.checkDuplicate();
 console.log("finished");
}

Actual Result

finished

Inside

Expected result

Inside

finished

I have tried asyn/await to wait for checkDuplicate() function to finish. But still no use. It would be grateful if u share the solution. Thanks in Advance !!!

Answer 1

The gotcha of async programming. Here's a solution with promises (you can also use observables):

getData(): Observable<any>{
  return this.http.get<any>(URL...);
}

async checkDuplicate(){
  var response = await this.getData().toPromise();
  if (response) {
      console.log("Inside");
  }
}

async proceed(){
 await this.checkDuplicate();
 console.log("finished");
}