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

Question

Right now the way I do http requests (borrowed from this answer) is this:

POST(url, data) {         var headers = new Headers(), authtoken = localStorage.getItem('authtoken');         headers.append("Content-Type", 'application/json');          if (authtoken) {         headers.append("Authorization", 'Token ' + authtoken)         }         headers.append("Accept", 'application/json');          var requestoptions = new RequestOptions({             method: RequestMethod.Post,             url: this.apiURL + url,             headers: headers,             body: JSON.stringify(data)         })          return this.http.request(new Request(requestoptions))         .map((res: Response) => {             if (res) {                 return { status: res.status, json: res.json() }             }         });     } 

This works fine, except for the fact that angular2 will fail if the status code returned is anything else than 200. For example, if a user wants to post something and the server returns 400, angular 2 will throw the exception:

uncaught exception: [object Object]

How can I avoid this? I'd like to handle these status codes in my app in order to enhance user experience (show errors, etc)

Answer 1

Yes you can handle with the catch operator like this and show alert as you want but firstly you have to import Rxjs for the same like this way

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

also you can handel error (with err block) that is throw by catch block while .map function,

like this -

... .subscribe(res=>{....}            err => {//handel here}); 

Update

as required for any status without checking particluar one you can try this: -

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 < 400 ||  error.status ===500) {                     return Observable.throw(new Error(error.status));                 }             })             .subscribe(res => {...},                        err => {console.log(err)} );