How to catch exception correctly from http request

Question

Part of my code    import  Injectable  from  angular2 core   import  Http  Headers  Request  Response  from  angular2 http   import  Observable  from  rxjs Observable   import  rxjs add operator map     Injectable   export class myClass      constructor protected http  Http        public myMethod         let request   new Request         method   GET         url   http   my url               return this http request request         map res   gt  res json           catch this handleError      Trouble line                                      Without this line code works perfectly         public handleError error  Response        console error error       return Observable throw error json   error     Server error             myMethod   produces exception in console of browser      ORIGINAL EXCEPTION  TypeError  this http request      map      catch is not a function

User · Answer

The RxJS functions need to be specifically imported. An easy way to do this is to import all of its features with import * as Rx from "rxjs/Rx"

Then make sure to access the Observable class as Rx.Observable.

User · Answer

in the latest version of angular4 use  import   Observable   from  rxjs Rx    it will import all the required things

User · Answer

New service updated to use the HttpClientModule and RxJS v5 5 x   import   Injectable                      from   angular core   import   HttpClient  HttpErrorResponse   from   angular common http   import   Observable                      from  rxjs Observable   import   catchError  tap                 from  rxjs operators   import   SomeClassOrInterface            from    interfaces   import  rxjs add observable throw     Injectable    export class MyService       url    http   my url       constructor private  http HttpClient         private handleError operation  String            return  err  any    gt                let errMsg    error in   operation    retrieving   this url                console log    errMsg     err              if err instanceof HttpErrorResponse                       you could extract more info about the error if you want  e g                   console log  status    err status     err statusText                        errMsg                                 return Observable throw errMsg                          public API     public getData     Observable lt SomeClassOrInterface gt               HttpClient get   returns the body of the response as an untyped JSON object             We specify the type as SomeClassOrInterfaceto get a typed result          return this  http get lt SomeClassOrInterface gt  this url               pipe                  tap data   gt  console log  server data    data                     catchError this handleError  getData                             Old service  which uses the deprecated HttpModule   import  Injectable               from  angular2 core   import  Http  Response  Request  from  angular2 http   import  Observable               from  rxjs Observable   import  rxjs add observable throw     import  rxjs Rx       use this line if you want to be lazy  otherwise  import  rxjs add operator map   import  rxjs add operator do       debug import  rxjs add operator catch     Injectable   export class MyService       constructor private  http Http         private  serverError err  any            console log  sever error    err       debug         if err instanceof Response              return Observable throw err json   error     backend server error                 if you re using lite-server  use the following line              instead of the line above              return Observable throw err text       backend server error                      return Observable throw err     backend server error              private  request   new Request           method   GET              change url to    data data junk  to generate an error         url     data data json                 public API     public getData             return this  http request this  request               modify file data json to contain invalid JSON to have  json   raise an error            map res   gt  res json        could raise an error if invalid JSON            do data   gt  console log  server data    data       debug            catch this  serverError             I use  do    now  tap    for debugging     When there is a server error  the body of the Response object I get from the server I m using  lite-server  contains just text  hence the reason I use err text   above rather than err json   error   You may need to adjust that line for your server   If res json   raises an error because it could not parse the JSON data   serverError will not get a Response object  hence the reason for the instanceof check   In this plunker  change url to   data data junk to generate an error     Users of either service should have code that can handle the error    Component       selector   my-app       template    lt div gt   data   lt  div gt           lt div gt   errorMsg   lt  div gt      export class AppComponent       errorMsg  string      constructor private  myService  MyService          ngOnInit             this  myService getData                subscribe                  data   gt  this data   data                  err    gt  this errorMsg    lt any gt err

User · Answer

Perhaps you can try adding this in your imports   import  rxjs add operator catch     You can also  do   return this http request request     map res   gt  res json       subscribe      data   gt  console log data       err   gt  console log err            gt  console log  yay            Per comments      EXCEPTION  TypeError  Observable 1 Observable throw is not a function   Similarly  for that  you can use   import  rxjs add observable throw

User · Answer

There are several ways to do this  Both are very simple  Each of the examples works great  You can copy it into your project and test it   The first method is preferable  the second is a bit outdated  but so far it works too   1  Solution 1     File - app module ts import   BrowserModule   from   angular platform-browser   import   NgModule   from   angular core   import   HttpClientModule   from   angular common http    import   AppComponent   from    app component   import   ProductService   from    product service   import   ProductModule   from    product module     NgModule     declarations        AppComponent        imports        BrowserModule      HttpClientModule        providers   ProductService  ProductModule     bootstrap   AppComponent     export class AppModule           File - product service ts import   Injectable   from   angular core   import   HttpClient   from   angular common http       Importing rxjs import  rxjs Rx   import   Observable   from  rxjs Rx   import   catchError  tap   from  rxjs operators      Important  Be sure to connect operators     There may be your any object  For example  we will have a product object import   ProductModule   from    product module     Injectable   export class ProductService         Initialize the properties      constructor private http  HttpClient  private product  ProductModule            If there are no errors  then the object will be returned with the product data         And if there are errors  we will get into catchError and catch them      getProducts    Observable lt ProductModule   gt           const url    YOUR URL HERE           return this http get lt ProductModule   gt  url  pipe              tap  data  any    gt                    console log data                               catchError  err    gt                    throw  Error in source  Details      err     Use console log err  for detail                                     2  Solution 2  It is old way but still works      File - app module ts import   BrowserModule   from   angular platform-browser   import   NgModule   from   angular core   import   HttpModule   from   angular http    import   AppComponent   from    app component   import   ProductService   from    product service   import   ProductModule   from    product module     NgModule     declarations        AppComponent        imports        BrowserModule      HttpModule        providers   ProductService  ProductModule     bootstrap   AppComponent     export class AppModule           File - product service ts import   Injectable   from   angular core   import   Http  Response   from   angular http       Importing rxjs import  rxjs Rx   import   Observable   from  rxjs Rx     Injectable   export class ProductService         Initialize the properties      constructor private http  Http            If there are no errors  then the object will be returned with the product data         And if there are errors  we will to into catch section and catch error      getProducts            const url               return this http get url  map               response  Response    gt                    const data   response json                    console log data                   return data                          catch               error  Response    gt                    console log error                   return Observable throw error

[http] How to catch exception correctly from http.request()?

Examples related to http

Examples related to typescript

Examples related to angular

Examples related to observable