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?

See the [documentation error handling](https://angular.io/guide/http#error-handling) — Igor, Mar 14 '18 at 01:38
@Igor i honestly had not thought of that. Doh! It is all right there. lmfao — Leonardo Wildt, Mar 14 '18 at 02:49

score 1 · Answer 1 · answered Mar 14 '18 at 01:49

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 '18 at 01:49

th3n3wguy

3,649
2
23
30

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? – pere57 Mar 14 '18 at 02:17
2

@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). – th3n3wguy Mar 14 '18 at 02:26
Thanks i am going to give these a try! – Leonardo Wildt Mar 14 '18 at 02:48
I see; you are referring to [How to access the correct `this` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) – pere57 Mar 14 '18 at 02:52
1

@LeonardoTrimarchi => If this works for you, would you please accept it as the answer so others can reference it in the future? – th3n3wguy Mar 14 '18 at 02:54
@th3n3wguy this handles the error but i still want to return a null object of type ICat. How would i do that? – Leonardo Wildt Mar 14 '18 at 13:06
1

@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! – th3n3wguy Mar 14 '18 at 14:04
@th3n3wguy thanks a lot for your response. I definitely learned something new. I was conflicted to select the other response as it was both of them that got me where i needed. – Leonardo Wildt Mar 14 '18 at 14:08
@LeonardoTrimarchi => No worries at all. I'm just here to help. Upvotes / accepted answers are just side-benefits. :) – th3n3wguy Mar 14 '18 at 14:12

score 1 · Accepted Answer · answered Mar 14 '18 at 02:03

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

Error handling in HttpResponse Angular

2 Answers2