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

User · 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    gt                    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    gt                    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  gt                   err   gt     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    gt                    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    gt                    if  error status  lt  400     error status    500                        return Observable throw new Error error status                                                  subscribe res   gt                                err   gt   console log err

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

Examples related to typescript

Examples related to angular

Examples related to http-status-code-415