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 !!!

Monika

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");
}

Vellavelleity

Thanks for ur answer @Andrei Tătar !! But still am getting the same issue – Monika

@sherinshaf you're probably using different code. Post your complete code. – Kasper

Same code. As soon as i call await this.getData().toPromise(); control goes to console.log("finished") in proceed() function.. its not waiting for response – Monika

have you copied all the code from my response? proceed also has async/await – Kasper

What about in we are in an interceptor that it is not async method? – Neckcloth

@GabrielGarcíaGarrido http interceptors can return an Observable or a Promise so they are asynchronous. You can use Promises (async/await) together with Observables... – Kasper

Answer 2

Lost a lot of time on this one. You have to use lastValueFrom as specified here: Conversion to Promises. ToPromise() has been deprecated.

import { lastValueFrom, tap } from 'rxjs';

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

async checkDuplicate(){
  return await lastValueFrom(this.getData()
    .pipe(tap(response => {
      if(response){
        console.log("Inside");
      }
    })
  ));
}

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

Greerson

Answer 3

You can update something like this.

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


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


proceed(){
this.checkDuplicate().then(value=>{
console.log("Return from promise => "+ value);
console.log("finished");
});
}

You can return promise from checkDuplicate and call another function after it is resolved by using "then".

Undersecretary