Dealing with errors within nested requests while using switchMap with RxJS

Question

Dealing with errors within nested requests while using switchMap with RxJS

I am faced with a situation where I need to make 2 dependent API calls: the getCars call requires the user id obtained from getUser.

There is a possibility that a user may not have any cars, resulting in a 404 error from the API.

How can I handle this scenario by returning the aggregated response, and when no cars are returned, simply using null/undefined for userData.cars?

I attempted to use catchError in the pipeline of getCars, but it doesn't seem to be effective:

getUser().pipe(
      switchMap(user => user.creditScore > 70 ? 
        getCars(user.id).pipe(
          catchError(() => of(undefined)),
          map( cars => ({user, cars}) )
        )
       : of({user: user, cars: undefined)
      )
    ).subscribe((userData) => {
      if (userData.user) {
        ........
      }
      if (!!userData.cars) {
        .........
      }
    },
    err => {
      ......
    });

angular typescript rxjs

Answer 1

Answer №1

Ensure that all paths in your code return or throw something within the catchError block. Additionally, make use of the rxjs of operator to return your default value as an observable. Here is the corrected code snippet:

getUser().pipe(
  switchMap(user => getCars(user.id).pipe(
    catchError((error) => {
      if (error.status == 404) return of([]);
      else throw error;
    }),
    map(cars => ({user, cars}))
  ))
).subscribe(res => ..., err => ...);

If a user has cars, the value of res will be:

{
  user: { id: 1 },
  cars: [ { id: 1 }, { id: 2} ]
}

If a user does not have any cars (due to a 404 error from getCars), the value of res will be:

{
  user: { id: 1 },
  cars: []
}

In the event of an unexpected error occurring in getCars (e.g., a 401 error), the error will be raised and can be accessed through err inside the subscribe method.

Answer 2

Ensure that all paths in your code return or throw something within the catchError block. Additionally, make use of the rxjs of operator to return your default value as an observable. Here is the corrected code snippet:

getUser().pipe(
  switchMap(user => getCars(user.id).pipe(
    catchError((error) => {
      if (error.status == 404) return of([]);
      else throw error;
    }),
    map(cars => ({user, cars}))
  ))
).subscribe(res => ..., err => ...);

If a user has cars, the value of res will be:

{
  user: { id: 1 },
  cars: [ { id: 1 }, { id: 2} ]
}

If a user does not have any cars (due to a 404 error from getCars), the value of res will be:

{
  user: { id: 1 },
  cars: []
}

In the event of an unexpected error occurring in getCars (e.g., a 401 error), the error will be raised and can be accessed through err inside the subscribe method.

Dealing with errors within nested requests while using switchMap with RxJS

Answer №1

Similar questions

How to Properly Retrieve an Array of JSON Objects Using Ionic 3 Storage

Maintain synchrony of the state with swiftly unfolding occurrences

Typescript Angular2 filtering tutorial

Angular 2: Emptying input field value on click event

Tips for preventing the rxjs error "TypeError: Cannot read properties of undefined" in the Angular framework

Experiencing a strange response while attempting to parse the result of an Angular 2 HTTP JSON request

Experiencing a problem with updating records in angular?

Updating the active tab in the navigation bar whenever the router navigates

Validation of passwords containing special characters in Angular2

Describing a function in Typescript that takes an array of functions as input, and outputs an array containing the return types of each function

Using renderProps in combination with TypeScript

The application's user interface is currently unable to access the REST API of the SSO Server

In Typescript, it is possible to provide values other than undefined for a parameter that is

What is the best way to kickstart a Reactive Angular 2 form by utilizing an Observable?

Avoiding the restriction of narrowing generic types when employing literals with currying in TypeScript

Adding TypeScript to your Vue 3 and Vite project: A step-by-step guide

Angular 4 Query Building Plugin

What are the recommended techniques for utilizing prototypal and prototype-based inheritance in modern JavaScript (ES6) and TypeScript?

receiving feedback from Firebase push action

Customize the appearance of the Material UI expansion panel when it is in its expanded