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

User · Accepted Answer

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

User · Answer

Include required imports and you can make ur decision in handleError method Error status will give the error code  import   HttpClient  HttpErrorResponse   from   angular common http   import  Observable  throwError  from  rxjs index   import   catchError  retry   from  rxjs operators   import  ApiResponse  from     model api response   import   TaxType   from     model taxtype model     private handleError error  HttpErrorResponse    if  error error instanceof ErrorEvent         A client-side or network error occurred  Handle it accordingly    console error  An error occurred    error error message     else        The backend returned an unsuccessful response code       The response body may contain clues as to what went wrong    console error       Backend returned code   error status            body was    error error          return an observable with a user-facing error message return throwError     Something bad happened  please try again later             getTaxTypes     Observable lt ApiResponse gt    return this http get lt ApiResponse gt  this baseUrl  pipe    catchError this handleError

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

Update

Examples related to typescript

Examples related to angular

Examples related to http-status-code-415