Using RxJs in Angular, you can invoke an observable from within an error callback

Question

Using RxJs in Angular, you can invoke an observable from within an error callback

I have a scenario where two observable calls are dependent on each other. Everything works fine, but when an error occurs in the response, I need to trigger another observable to rollback the transaction.

Below is my code:

return this.myService.createOrder()
    .pipe(
        concatMap((res: MyResponse) => this.addProduct(res.orderId, PRODUCT_ID))  
    ).subscribe({
          error: (error: any): void => // TODO: Call another observable here passing res.orderId to rollback transaction
    });

In the TODO section, I intend to call another service if there's an error with the res.orderId, but I want to avoid nested subscriptions.

Is there a way to achieve this without creating nested subscriptions?

angular typescript rxjs

Answer 1

Answer №1

One of the solutions, pointed out by @Emilien, is to use the catchError method.

To implement this solution, you need to provide a function to catchError that takes an error as input and returns an Observable.

Here is an example implementation:

// store orderId in case of error
let orderId: any

return this.myService.createOrder().pipe(
  tap((res: MyResponse) => orderId = res.orderId),
  concatMap((res: MyResponse) => this.addProduct(res.orderId, PRODUCT_ID)), 
  catchError((error: any) => {
    // create Observable for rolling back transaction
    return this.rollBack(orderId, error)
  })
).subscribe(console.log);

In this approach, there is only one subscription for the entire chain of Observables.

Answer 2

One of the solutions, pointed out by @Emilien, is to use the catchError method.

To implement this solution, you need to provide a function to catchError that takes an error as input and returns an Observable.

Here is an example implementation:

// store orderId in case of error
let orderId: any

return this.myService.createOrder().pipe(
  tap((res: MyResponse) => orderId = res.orderId),
  concatMap((res: MyResponse) => this.addProduct(res.orderId, PRODUCT_ID)), 
  catchError((error: any) => {
    // create Observable for rolling back transaction
    return this.rollBack(orderId, error)
  })
).subscribe(console.log);

In this approach, there is only one subscription for the entire chain of Observables.

Answer 3

Answer №2

Maybe this solution could work, have you considered using CathError ?

give this a try: return this.myService.createOrder().pipe(
  concatMap((res: MyResponse) => this.addProduct(res.orderId, PRODUCT_ID)), 
  catchError((res: MyResponse) => {
    // Implement your logic here with the response
  })
).subscribe(console.log);

Answer 4

Maybe this solution could work, have you considered using CathError ?

give this a try: return this.myService.createOrder().pipe(
  concatMap((res: MyResponse) => this.addProduct(res.orderId, PRODUCT_ID)), 
  catchError((res: MyResponse) => {
    // Implement your logic here with the response
  })
).subscribe(console.log);

Answer 5

Answer №3

Fishing and Releasing

If you prefer the original observable to encounter an error. You can catch the error, execute your rollback process, and then re-raise the error once it has been resolved.

An implementation could resemble the following:

this.myService.placeBet().pipe(
  mergeMap((res: BetResponse) => this.addStake(res.betId, STAKE_ID).pipe(
    catchError(err => concat(
      this.undoBet(res.betId),
      throwError(() => err)
    )
  )  
).subscribe(...);

Answer 6

Fishing and Releasing

If you prefer the original observable to encounter an error. You can catch the error, execute your rollback process, and then re-raise the error once it has been resolved.

An implementation could resemble the following:

this.myService.placeBet().pipe(
  mergeMap((res: BetResponse) => this.addStake(res.betId, STAKE_ID).pipe(
    catchError(err => concat(
      this.undoBet(res.betId),
      throwError(() => err)
    )
  )  
).subscribe(...);

Using RxJs in Angular, you can invoke an observable from within an error callback

Answer №1

Answer №2

Answer №3

Fishing and Releasing

Similar questions

Angular CORS Policy

What is the best way to change the parent route without losing the child routes?

What is the process for combining an object and a primitive type to create a union type?

Step-by-step guide for setting up automatic Tslint in IntelliJ

Enhance Your Angular Experience with Console Extensions

Achieving VS Code/typescript autocomplete functionality without the need to import the library

How can I determine the appropriate data type for 'this' when utilizing TypeScript in conjunction with DataTables?

Creating variables in Typescript

Testing the Snackbar function with Angular and TypeScript: Unit Testing

Customize the font style of Angular mat expansion panel

The type 'string' cannot be utilized to index type

Tips for creating a tailored Express.js request interface using Typescript efficiently

Angular2 RxJS stream initiates an individual HTTP call for every child in the parent collection

Having trouble with filtering an array using the some() method of another array?

Are you looking for a streamlined method to create styled components with MaterialUI?

Utilizing vue-property-decorator: Customizing the attributes of @Emit

What is a sleek method for including a key and value pair to an object using an array?

Exploring advanced customization options in Angular 6+: Extending the default configuration beyond the environment settings

Check the attribute sequence in Angular HTML templates

Utilizing Typescript for parsing large JSON files