Angular Typescript - 异步等待内部订阅

Question

I have a function like this;

openModalWhenRemoveItem() {
  callRemoveService();
  openMyModal();
}

callRemoveService() function has a subscribe and it's async function, the openMyModal() function must be invoked after callRemoteService()

callRemoveService() {
  combineLatest(myAccountSelector$, myCompanySelector$).pipe(
    switchMap(res) => 
    this.myService.remove(res[0].id, res[1].id))
    .subscribe((res)=> console.log(res))
}

I need to create a function that has to wait the internal subscription in callRemoveService() before calling the openModal() . I want to try with async await but I can't find a solution. I tried in this way:

async callRemoveService() {
  await combineLatest(myAccountSelector$, myCompanySelector$).pipe(
    switchMap(res) => 
    this.myService.remove(res[0].id, res[1].id))
    .subscribe((res)=> console.log(res))
}

openModalWhenRemoveItem() {
  callRemoveService().then(() => {openMyModal();});
  
}

but it doesn't work. I cant put openMyModal() function into subscribe.

Answer 1

The solution in your case would be to return the Observable from the callRemoveService method instead of subscribing to it. The caveat with this approach is that you need to call subscribe in all the places where you call callRemoveService .

If you do that, then it is trivial:

callRemoveService(): Observable<any> {
  return combineLatest(myAccountSelector$, myCompanySelector$).pipe(
    switchMap(res) => 
    this.myService.remove(res[0].id, res[1].id));
}

Then your openModalWhenRemoveItem method becomes this:

openModalWhenRemoveItem() {
  callRemoveService().subscribe(() => {
    openMyModal();
  };
}

Answer 2

combineLatest is a RxJS operator, it returns an Observable. You can't simply await an Observable, it's not a Promise. Simply subscribe to it.

callRemoveService(): Observable<any> {
  return combineLatest(myAccountSelector$, myCompanySelector$);
}

and then :

openModalWhenRemoveItem() {
  callRemoveService().subscribe(openMyModal);
}

Alternatively, you can transform your Observable to Promise using the lastValueFrom operator, and await it :

callRemoveService(): Promise<any> {
  return lastValueFrom( combineLatest(myAccountSelector$, myCompanySelector$)) ;
}

async openModalWhenRemoveItem() {
  await callRemoveService();
  openMyModal();
}