Issue when calling one method after another with Angular9 Promise

Question

In one of the components in my Angular9 project, I have a method that gets data from an external API, and another method that deletes a record by sending details to an external API (both calls use a service class). The methods are coded as below:-

getImageData(): void {
    this.subscriptions.add(this.service.getImageData()
    .subscribe((result: Response) => {
      if(result.Found) {
       this.imageData = result.Data;
    }
  });
}

deleteImage(): void {
  this.subscriptions.add(this.service.deleteImage()
  .subscribe((result: Response) => {
   if(result.success) {
     // Display Toastr Notification for successful deletion
     this.imageDeleted = true;
   }
  })
}

In case a user decides to delete an image, then the getImageData() function should be called After the deleteImage() function completes its operation (the image is deleted from backend DB and user is shown successful notification). In order to achieve this, I tried using promises in the following way:-

deletePromiseFunction() {
        return new Promise<void>((resolve) => {
            this.deleteImage();
            resolve();
        });
    }

refreshGalleryDataPromise() {
        return new Promise<void>((resolve) => {
            this.getImageData();
            resolve();
        });
    }

I use then() to specify the order in which the methods need to be called:-

deleteRefreshWorkflow() {
         this.deletePromiseFunction().then(() => {
            if(this.imageDeleted) {
                 this.refreshGalleryDataPromise();
            }
         });
    }

The HTML code that calls the above function is:-

<button class="btn btn-danger" (click)="deleteRefreshWorkflow()">Delete</button>

However, the issue I'm facing is that even though the method execution order is specified, the 'getImageData()' function is getting called first, and then the 'deleteImage()' function is called when the 'Delete' button is clicked. This is giving wrong results. The getImageData() function should be called After the deleteImage() function is called.

Am I doing something wrong? Can someone please help me with this. I'm new to Angular9

Answer 1

Instead of subscribing to individual observables you can achieve the same functionality without subscribing to individual observables. Since deleteImage() and getImageData() methods return observables, you can use the tap operator to listen to source observable changes. Then use rxjs higher order mapping operator like exhaustMap or switchMap to work with multiple observables.

Try this:

deleteRefreshWorkflow() {
    this.service
      .deleteImage()
      .pipe(
        tap((result: Response) => {
          if (result.success) {
            // Display Toastr Notification for successful deletion
            this.imageDeleted = true;
          }
        }),
        delay(200),
        exhaustMap(() =>
          this.service.getImageData().pipe(
            tap((result: Response) => {
              if (result.Found) {
                this.imageData = result.Data;
              }
            })
          )
        )
      )
      .subscribe(() => {});
  }