Catch not working for http.get Angular2

Question

I am trying to make an ajax call using an Http service that is working fine.

Now I would like to handle cases of failures. An example is 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 the observable from the catch block, as this is the signature of this. Therefore try

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

Here is a 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 work with http status codes other than 200 in Angular 2

Answer 2

You can try to return the Observable object from the catch callback as follows:

 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')); }