Error handling in HttpResponse Angular

Question

I have a method in a service class that relies on an http get using an Id. My method returns an Observable with different properties that the rest of my app depends on.

getCat(catNumber: string): Observable<ICat> {
    const url = `${this.serviceURL}Cat/${catNumber}`;
    return this._http.get(url).map(this.extractResponse).catch(this.handleError);
  }

the problem i am having is that the method that calls this expects an ICat object. If the server responds with a 404 for no cat found that blows up the rest of the application. How can i check what the status code is and return something that my other method could use. Even if it is a Cat object with an invalid id?

@Igor i honestly had not thought of that. Doh! It is all right there. lmfao — Leonardo Wildt
– Leonardo Wildt, Commented Mar 14, 2018 at 2:49

pere57 · Accepted Answer · 2018-03-14 02:03:50Z

1

You might find the rxjs documentation useful. It sounds like you want to swallow the 404 error and emit a default item. In your handleError function try something like:

private handleError(err: HttpErrorResponse) {
        if (err.status == 404) {
            let defaultCat : ICat = null; // change to whatever you need
            return Observable.Of(defaultCat); 
        }
        else { 
            // continue handling errors as before
        }
 }

answered Mar 14, 2018 at 2:03

pere57

6871 gold badge10 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

th3n3wguy · Accepted Answer · 2018-03-14 01:49:30Z

1

// Your code:
/*getCat(catNumber: string): Observable<ICat> {
  const url = `${this.serviceURL}Cat/${catNumber}`;
  return this._http.get(url).map(this.extractResponse).catch(this.handleError);
}*/

// First assumption => You are using Angular 2-4 with RxJS <4 and the HttpModule...
getCat(catNumber: string): Observable<ICat> {
  const url = `${this.serviceURL}Cat/${catNumber}`;
  return this._http.get(url)
    // You need to be doing the same thing as below, whichever way that is.
    .map((response) => this.extractResponse(response))
    // You were calling a method without binding the context. This causes weird issues with Angular.
    .catch((err: HttpErrorResponse) => this.handleError(err));
    // You could also do this, but I am leaving it commented out because it is a really old way of doing things:
    // .catch(this.handleError.bind(this));
}

// This is assuming that you are using Angular 5 with RxJS 5 and the HttpClientModule...
import { map, catchError } from 'rxjs/operators';

getCat(catNumber: string): Observable<ICat> {
  return this._http.get(`${this.serviceURL}Cat/${catNumber}`)
    .pipe(
      map((response) => this.extractResponse(response)),
      catchError((err: HttpErrorResponse) => this.handleError(err))
    );
}

answered Mar 14, 2018 at 1:49

th3n3wguy

3,7242 gold badges25 silver badges31 bronze badges

9 Comments

pere57 Over a year ago

In your Angular 2-4 sample, what is the value in changing e.g. .map(this.extractResponse) to .map( (respone)=>this.extractResponse(response))? In what way are they different?

th3n3wguy Over a year ago

@pere57 => The difference is that you are not binding the this context to the new function call, which might cause you to lose your service's context. I don't see any code for that function call or the rest of your code, so I am purely going with assumptions there and only doing what I know to be safe (generally-speaking).

Leonardo Wildt Over a year ago

Thanks i am going to give these a try!

th3n3wguy Over a year ago

@LeonardoTrimarchi => If this works for you, would you please accept it as the answer so others can reference it in the future?

th3n3wguy Over a year ago

@LeonardoTrimarchi => Looks like you found the answer to your question. I didn't know that you wanted to return a null object. Your original question was just asking why it was failing and causing your application to crash, which my answer solved. Glad you found your whole answer!

|

Collectives™ on Stack Overflow

Error handling in HttpResponse Angular

2 Answers 2

Comments

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related