RxJS pipe function disregarding observable

Question

I am upgrading an app to RxJS from Promises and I am not entirely sure whether I am on the right track.

Case: Given a ModalComponant that loads in when an HTTP request is sent and destroys when the response is received. So what I do is as follows

public post(uri: string, body: object, showLoading: boolean = true, params: object = {}): Observable<any> {
if (showLoading) {
  this.toggleModal('open');
}

return this.http.post(
  this.createUrl(uri),
  body,
  this.createOptionsWrapper(params)
)
.pipe(
  this.toggleModal('close'),
  catchError(err => this.handleError(err))
);

}

toggleModal() accepts 1 parameter and based on that it will open/close the Modal. I understand pipeable Operators must return a OperatorFunction type. What do you reckon what is the most suitable RxJS Operator for the above case where I don't touch the Observable itself I merely want to make it pipeable so it runs in the given sequence? Might be worth creating a custom one myself? Of course the Observable being returned here will be piped again wherever the service is injected.

Answer 1

IMO finalize operator would be best fit here. It's invoked when the source completes or errors and will not modify the emission from the observable.

public post(
  uri: string, 
  body: object, 
  showLoading: boolean = true,
  params: object = {}
): Observable<any> {
  if (showLoading) {
    this.toggleModal('open');
  }

  return this.http.post(
    this.createUrl(uri),
    body,
    this.createOptionsWrapper(params)
  ).pipe(
    finalize(() => {
      if (showLoading) {
        this.toggleModal('close');
      }
    }),
    catchError(err => this.handleError(err))
  );
}

Answer 2

Use the tap operator if you don't want to modify the results of response.

return this.http.post(
  this.createUrl(uri),
  body,
  this.createOptionsWrapper(params)
)
.pipe(
      tap( () => this.toggleModal('close') ),
      catchError(err => this.handleError(err))
);

Answer 3

@Michael D is correct IMO that finalize is the proper operator, but i also believe you should wrap this in a defer:

public post(uri: string, body: object, showLoading: boolean = true, params: object = {}): Observable<any> {
  return defer(() => {
    if (showLoading) {
      this.toggleModal('open');
    }

    return this.http.post(
      this.createUrl(uri),
      body,
      this.createOptionsWrapper(params)
    ).pipe(
      finalize(() => this.toggleModal('close')),
      catchError(err => this.handleError(err))
    );
  });
}

the reason being that observables have an expectation that they do nothing unless they're subscribed to. so if you just were building some conditional like so:

let save$ = this.service.post(...)
if (id) {
   save$ = this.service.put(...)
}
save$.subscribe();

the modal wouldn't get toggled UNTIL you actually subscribe. without defer, the modal would be toggled at line 1. The general point being, that without defer you create situations where the modal may get opened and then never be closed if you never subscribe. using defer ensures that can never happen.