Http post and get request in angular 6

Question

In angular 5 2 x for http get and post I had this code   post url  string  model  any   Observable lt boolean gt     return this http post url  model     map response   gt  response     do data   gt  console log url          JSON stringify data       catch err   gt  this handleError err        get url  string   Observable lt any gt     return this http get url     map response   gt  response     do data   gt      console log url          JSON stringify data          catch  error  any    gt  Observable throw this handleError error          In angular 6 it doesn t work   How can we make an HTTP post or get request

User · Answer

For reading full response in Angular you should add the observe option     observe   response          return this http get    environment serverUrl  api posts   postId  comments  page   page  amp size   size      observe   response

User · Answer

You can do a post get using a library which allows you to use HttpClient with strongly-typed callbacks   The data and the error are available directly via these callbacks   The library is called angular-extended-http-client   angular-extended-http-client library on GitHub  angular-extended-http-client library on NPM  Very easy to use   Traditional approach  In the traditional approach you return Observable lt HttpResponse lt T gt   from Service API  This is tied to HttpResponse   With this approach you have to use  subscribe x         in the rest of your code   This creates a tight coupling between the http layer and the rest of your code   Strongly-typed callback approach  You only deal with your Models in these strongly-typed callbacks   Hence  The rest of your code only knows about your Models   Sample usage  The strongly-typed callbacks are   Success    IObservable lt T  IObservableHttpResponse IObservableHttpCustomResponse lt T    Failure    IObservableError lt TError  IObservableHttpError IObservableHttpCustomError lt TError    Add package to your project and in your app module  import   HttpClientExtModule   from  angular-extended-http-client     and in the  NgModule imports    imports                          HttpClientExtModule        Your Models   export class SearchModel       code  string       Normal response returned by the API  export class RacingResponse       result  RacingItem         Custom exception thrown by the API  export class APIException       className  string      Your Service  In your Service  you just create params with these callback types   Then  pass them on to the HttpClientExt s get method   import   Injectable  Inject   from   angular core  import   SearchModel  RacingResponse  APIException   from     models models  import   HttpClientExt  IObservable  IObservableError  ResponseType  ErrorType   from  angular-extended-http-client         Injectable   export class RacingService          Inject HttpClientExt component      constructor private client  HttpClientExt   Inject APP CONFIG  private config  AppConfig                  Declare params of type IObservable lt T gt  and IObservableError lt TError gt         These are the success and failure callbacks        The success callback will return the response objects returned by the underlying HttpClient call        The failure callback will return the error objects returned by the underlying HttpClient call      searchRaceInfo model  SearchModel  success  IObservable lt RacingResponse gt   failure   IObservableError lt APIException gt             let url   this config apiEndpoint           this client post lt SearchModel  RacingResponse gt  url  model                                                         ResponseType IObservable  success                                                         ErrorType IObservableError  failure             Your Component  In your Component  your Service is injected and the searchRaceInfo API called as shown below     search               this service searchRaceInfo this searchModel  response   gt  this result   response result                                                    error   gt  this errorMsg   error className          Both  response and error returned in the callbacks are strongly typed  Eg  response is type RacingResponse and error is APIException

User · Answer

Update   In angular 7  they are the same as 6  In angular 6  the complete answer found in live example         POST  add a new hero to the database      addHero  hero  Hero   Observable lt Hero gt     return this http post lt Hero gt  this heroesUrl  hero  httpOptions     pipe      catchError this handleError  addHero   hero                GET heroes from the server     getHeroes     Observable lt Hero   gt    return this http get lt Hero   gt  this heroesUrl     pipe      catchError this handleError  getHeroes                 it s because of pipeable lettable operators which now angular is able to use tree-shakable and remove unused imports and optimize the app  some rxjs functions are changed   do - gt  tap catch - gt  catchError switch - gt  switchAll finally - gt  finalize   more in MIGRATION  and Import paths  For JavaScript developers  the general rule is as follows   rxjs  Creation methods  types  schedulers and utilities  import   Observable  Subject  asapScheduler  pipe  of  from  interval  merge  fromEvent   from  rxjs     rxjs operators  All pipeable operators   import   map  filter  scan   from  rxjs operators     rxjs webSocket  The web socket subject implementation  import   webSocket   from  rxjs webSocket     rxjs ajax  The Rx ajax implementation  import   ajax   from  rxjs ajax     rxjs testing  The testing utilities  import   TestScheduler   from  rxjs testing     and for backward compatability you can use rxjs-compat

[httprequest] Http post and get request in angular 6

Examples related to httprequest

Examples related to observable

Examples related to angular6