catch is not working for http.get Angular2

Question

I am trying to make an ajax call with Http service, which is working fine.

Now I would like to handle failure cases. Example if we get 404 or any other errors.

I am using the following code.

import {Component,Inject} from '@angular/core';
import {Http, Response,HTTP_PROVIDERS} from '@angular/http';
import {DoService} from './service';
import 'rxjs/Rx';
import 'rxjs/add/operator/catch';

@Component({
    selector: 'comp-one',
    template: `<h2>My First Angular 2 App</h2>{{data}}
        <input type="button" (click)="doSomething()" value="Do Http"/>`
})

export class ComponentOne { 
    constructor(public _http:Http){
    console.log("It is from ComponentOne constructor..");
        this._http = _http;
    }
    data:Object;
    doSomething(){
        console.log("It is from doSomething ComponentOne");
        let temp:any = this._http.get('people.json')//people.json is not exist, intendedly maing any error
     .map(res => res.json())
        .catch((err:any)=>{ console.log("Something is wrong..")});// If i keep this line i am getting errors like "Argument of type '(err:any) => void' is not assignable to parameter of type '(err: any, caught: Observable<any>) => Observable<{}>"
        temp.subscribe(
        (res:any)=> {this.data = res._body; console.log(res)},
        (error:any)=>{ console.log("It isf from error..")},//It is not even getting called this block
        () => console.log('thire,,,ddjfladjfljasdlfj'));//In one of the forum they suggested to use this 3rd perameter, this is also not working for me.

  } 

}

Answer 1

You need to return observable from the catch block as this is the signature of this. So try

return Observable.throw(new Error(error.status));

Here is the snippet

import {Observable} from 'rxjs/Rx';
...

return this.http.request(new Request(this.requestoptions))
    .map((res: Response) => {
        if (res) {
            if (res.status === 201) {
                return [{ status: res.status, json: res }]
            }
            else if (res.status === 200) {
                return [{ status: res.status, json: res }]
            }
        }
    }).catch((error: any) => {
        if (error.status === 500) {
            return Observable.throw(new Error(error.status));
        }
        else if (error.status === 400) {
            return Observable.throw(new Error(error.status));
        }
        else if (error.status === 409) {
            return Observable.throw(new Error(error.status));
        }
        else if (error.status === 406) {
            return Observable.throw(new Error(error.status));
        }
    });
}

see also

• How to deal with http status codes other than 200 in Angular 2

Answer 2

You can try to return Observable object from catch callback like this:

doSomething(){
  console.log("It is from doSomething ComponentOne");
  let temp:any = this._http.get('people.json')
     .map(res => res.json())
     .catch((err:any) =>{ 
        console.log("Something is wrong..");
        return Observable.of(undefined); <== this line 
     });

  temp.subscribe(
     (res:any)=> {this.data = res._body; console.log(res)},
     (error:any)=>{ console.log("It isf from error..")},
     () => console.log('thire,,,ddjfladjfljasdlfj'));
}