RxJS pipe operation ignoring observable

Question

RxJS pipe operation ignoring observable

Currently, I am in the process of transitioning an app from Promises to RxJS and I could use some guidance on whether I am heading in the right direction.

Situation: I have a ModalComponent that appears when an HTTP request is sent and disappears once the response is received. Here's what I'm doing:

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() takes one parameter and controls the opening or closing of the Modal based on that. I am aware that pipeable Operators should return an OperatorFunction type. What do you think would be the most appropriate RxJS Operator for my scenario, where I don't need to manipulate the Observable itself but simply want to make it pipeable so it follows a specific sequence? Would it be beneficial to create a custom Operator for this purpose? Keep in mind that the Observable being returned here will be piped elsewhere whenever the service is injected.

angular typescript rxjs rxjs-pipeable-operators

Answer 1

Answer №1

In my opinion, using the finalize operator would be the most suitable approach in this scenario. It is triggered when the source completes or encounters an error and does not alter the output 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

In my opinion, using the finalize operator would be the most suitable approach in this scenario. It is triggered when the source completes or encounters an error and does not alter the output 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 3

Answer №2

Agreeing with Michael D, I believe that using the finalize operator is essential in this scenario. However, I also suggest wrapping it in a defer statement:

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

It's important to note that observables are designed to do nothing until they are subscribed to. So, by utilizing defer, you avoid situations where actions occur prematurely:

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

Without defer, the modal could potentially be toggled before subscription. By incorporating defer, you ensure that actions are performed only when necessary, preventing any unexpected behavior.

Answer 4

Agreeing with Michael D, I believe that using the finalize operator is essential in this scenario. However, I also suggest wrapping it in a defer statement:

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

It's important to note that observables are designed to do nothing until they are subscribed to. So, by utilizing defer, you avoid situations where actions occur prematurely:

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

Without defer, the modal could potentially be toggled before subscription. By incorporating defer, you ensure that actions are performed only when necessary, preventing any unexpected behavior.

Answer 5

Answer №3

When working with responses and you prefer not to alter the results, consider using the tap operator.

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

Answer 6

When working with responses and you prefer not to alter the results, consider using the tap operator.

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

RxJS pipe operation ignoring observable

Answer №1

Answer №2

Answer №3

Similar questions

Retrieving latitude and longitude from place id in an Angular Google Maps component

What is the process for subscribing to the output of a flatMap operation?

How can we use tsyringe (a dependency injection library) to resolve classes with dependencies?

Cannot assign Angular 4 RequestOptions object to post method parameter

Uncover the solution to eliminating webpack warnings associated with incorporating the winston logger by utilizing the ContextReplacementPlugin

Nebular specializes in crafting personalized registration solutions

Obtain item from DataSource in Angular's MatTable

Creating an Angular project that functions as a library and integrating it into a JavaScript project: a step-by-step guide

Is there a way to change a typescript enum value into a string format?

Transferring data types to a component and then sending it to a factory

Angular Image/Video Preview: Enhance Your Visual Content Display

When using TypeScript's array intersection type, properties are not accessible when using methods like Array.forEach or Array.some. However, they can be accessed within a for loop

Is it possible to utilize an XML format for translation files instead of JSON in React Native?

Where can I find the Cypress.json file for Angular integration with Cypress using Cucumber?

Exploring TypeScript's Conditional Types

What is the best way to handle asynchronous actions while initializing a database in Next.js?

Guide on integrating Amazon S3 within a NodeJS application

What is the best way to filter and sort a nested tree Array in javascript?

Design: Seeking a layout feature where one cell in a row can be larger than the other cells

Discover the accurate `keyof` for a nested map in TypeScript