Angular2 handling http response

Question

I just have a question regarding structuring and handling responses from http requests within a service  I am using Angular2 alpha46 Typescript   Just started testing it out- which I love    Ps   Thank you all the people who have been working on it and contributing via github    So take the following   login-form component ts  import  Component  CORE DIRECTIVES  FORM DIRECTIVES  from  angular2 angular2   import  UserService  from        shared service user service   import  Router  from  angular2 router   import  User  from        model user model   import  APP ROUTES  Routes  from        core route config     Component       selector   login-form       templateUrl   app login components login-form component html       directives   CORE DIRECTIVES  FORM DIRECTIVES      export class LoginFormComponent       user  User      submitted  Boolean   false       constructor private userService UserService  private router  Router            this user   new User               onLogin             this submitted   true           this userService login this user                   gt  this router navigate  Routes home as              from this component I import my userService which will house my http request to login the user the service looks like this   user service ts  import  Inject  from  angular2 angular2   import  Http  HTTP BINDINGS  Headers  from  angular2 http   import  ROUTER BINDINGS  from  angular2 router   import  User  from        model user model    export class UserService        private headers  Headers       constructor  Inject Http  private http Http               login user  User  done  Function            var postData    email     user email     amp password     user password           this headers   new Headers            this headers append  Content-Type    application x-www-form-urlencoded             this http post   auth local   postData                    headers  this headers                             map  res any    gt  res json                 subscribe                  data   gt  this saveJwt data id token                   err   gt  this logError err                        gt  done                             saveJwt jwt  string            if jwt  localStorage setItem  id token   jwt             logError err  any            console log err             What I want to do is to be able to handle the response the call returns after the http request  For instance if the user credentials are invalid I pass a 401 response back from the backend  My question is where is the best way to handle the response and return the result back to the component where i called the method from so I can manipulate the view to show either the success message or display an error message    At the moment in my service under login I am currently not handling the response I am simply doing a callback back to the original component but I feel this isnt the correct way to go about it  Can someone shed some light on what they would do in this typical scenario  Would I handle the response in the first parameter of the subscribe function like    login user  User  done  Function         var postData    email     user email     amp password     user password       this headers   new Headers        this headers append  Content-Type    application x-www-form-urlencoded         this http post   auth local   postData                headers  this headers                     map  res any    gt  res json             subscribe               data    gt                       Handle response here                 let responseStat   this handleResponse data header                      Do some stuff                 this saveJwt data id token                       do call back to original component and pass the response status                 done responseStat                              err   gt  this logError err                handleResponse header        if header status    401            return  success              return  error blah blah      Is a call back fine in this case or can this be handled better with an observable or a promise   Concluding what I am asking is    What is the best practice to handle the response from the http response and handle the status in the view of the form from the user service ts back to the login-form component ts

User · Answer

The service    import  rxjs add operator map    import   Http   from   angular http   import   Observable   from  rxjs Rx  import   Injectable   from   angular core     Injectable   export class ItemService     private api    your api url      constructor private http  Http            toSaveItem item        return new Promise  resolve  reject    gt          this http          post this api     items     item  item             map res   gt  res json               This catch is very powerfull  it can catch all errors          catch  err  Response    gt                 The err statusText is empty if server down  err type     3            console log  err statusText     Can t join the server                   Really usefull  The app can t catch this in   err   closure           reject  err statusText     Can t join the server                   This return is required to compile but unuseable in your app           return Observable throw err                         The  err    gt     param on subscribe can t catch server down error so I keep only the catch          subscribe data   gt    resolve data                    In the app    this itemService toSaveItem item  then     res    gt    console log  success   res        err    gt    console log  error   err

User · Answer

Update alpha 47  As of alpha 47 the below answer  for alpha46 and below  is not longer required  Now the Http module handles automatically the errores returned  So now is as easy as follows     http    get  Some Url      map res   gt  res json       subscribe       data    gt  this data   data       err    gt  this error   err      Reach here if fails   Alpha 46 and below  You can handle the response in the map       before the subscribe   http    get  Some Url      map res   gt           If request fails  throw an Error that will be caught     if res status  lt  200    res status  gt   300          throw new Error  This request has failed     res status                 If everything went fine  return the response     else         return res json                  subscribe       data    gt  this data   data     Reach here if res status  gt   200  amp  amp   lt   299      err    gt  this error   err      Reach here if fails   Here s a plnkr with a simple example   Note that in the next release this won t be necessary because all status codes below 200 and above 299 will throw an error automatically  so you won t have to check them by yourself  Check this commit for more info

User · Answer

in angular2 2 1 1 I was not able to catch the exception using the  data   error  pattern  so I implemented it using  catch         It s nice because it can be used with all other Observable chained methods like  retry  map etc   import  Observable  from  rxjs Rx       Http    put         catch err   gt           notify  UI error handling         return Observable throw err      observable needs to be returned or exception raised         subscribe data   gt          handle success   from documentation      Returns       Observable   An observable sequence containing elements from consecutive source sequences until a source sequence terminates successfully

[typescript] Angular2 handling http response

Examples related to typescript

Examples related to angular