Upgrade to Pro — share decks privately, control downloads, hide ads and more …

A close look to Angular's new HttpClient

A close look to Angular's new HttpClient

Presentation from ng-be in December 2017.

15934fa2aa7b2ce21f091e9b7cffa856?s=128

Manfred Steyer
PRO

December 09, 2017
Tweet

Transcript

  1. A close look to Angular's new HttpClient Manfred Steyer SOFTWAREarchitekt.at

  2. About me … • Manfred Steyer • Angular Workshops and

    Consultancy • SOFTWAREarchitekt.at • Google Developer Expert (GDE) Page ▪ 2 Manfred Steyer
  3. In the old days, everything was better ;-)

  4. Just a few examples …

  5. Http in Angular Http (Service) • Angular 2+ • Most

    Common Use Cases (80:20 principle) • Experimental • Deprecated with 5.0 HttpClient • Angular 4.3 • A lot of additional features • Full comfort we know from $http
  6. Contents • Short overview of Basics • Custom Data Formats

    (Binary, Text) • Progress Information • Interceptors for Extensions • Token-based Security
  7. DEMO

  8. angular-crud

  9. None
  10. Basics

  11. HttpClient HttpClientModule and HttpClient from @angular/common/http let url = 'http://www.angular.at/api/hotel';

    let headers = new HttpHeaders() .set('Accept', 'application/json'); let params = new HttpParams() .set('city', this.city); this .http .get<Hotel[]>(url, { headers, params }) .subscribe( hotels => console.debug('hotels', hotels), err => console.error('err', err) );
  12. Getting the full HttpResponse save(entity: HotelBooking): Observable<string> { let url

    = […] let headers = […] return this.http .post<HotelBooking>(url, entity, {headers, observe: 'response'}) […] }
  13. Getting the full HttpResponse save(entity: HotelBooking): Observable<string> { let url

    = […] let headers = […] return this.http .post<HotelBooking>(url, entity, {headers, observe: 'response'}) .pipe( map((response: HttpResponse<HotelBooking>) => { console.debug('status', response.status); console.debug('body', response.body); return response.headers.get('Location'); })); }
  14. Testing

  15. Main Idea: Mock the HttpBackend HttpClientTestingModule Your Code Test HttpClient

    HttpBackend Server MockBackend
  16. Testing it('can load hotels by city', () => { let

    service: HotelService = TestBed.get(HotelService); let ctrl: HttpTestingController = TestBed.get(HttpTestingController); […] });
  17. Testing it('can load hotels by city', () => { let

    service: HotelService = TestBed.get(HotelService); let ctrl: HttpTestingController = TestBed.get(HttpTestingController); service.find({ city: 'Graz' }).subscribe( hotels => expect(hotels.length).toBe(2), err => fail(err) ); […] });
  18. Testing it('can load hotels by city', () => { let

    service: HotelService = TestBed.get(HotelService); let ctrl: HttpTestingController = TestBed.get(HttpTestingController); service.find({ city: 'Graz' }).subscribe( hotels => expect(hotels.length).toBe(2), err => fail(err) ); let req = ctrl.expectOne('/hotel?city=Graz'); expect(req.request.method).toBe('GET'); […] });
  19. Testing it('can load hotels by city', () => { let

    service: HotelService = TestBed.get(HotelService); let ctrl: HttpTestingController = TestBed.get(HttpTestingController); service.find({ city: 'Graz' }).subscribe( hotels => expect(hotels.length).toBe(2), err => fail(err) ); let req = ctrl.expectOne('/hotel?city=Graz'); expect(req.request.method).toBe('GET'); req.flush([{id: 1, name: 'Hotel Mama'}, {id: 2, name: 'Budget Hotel'}]); ctrl.verify(); });
  20. Custom Data Formats (Text and Binary)

  21. Using XML findById(id: string): Observable<HotelBooking> { […] return this.http .get(url,

    { headers, params, responseType: 'text'}) […] }
  22. Using XML findById(id: string): Observable<HotelBooking> { […] return this.http .get(url,

    { headers, params, responseType: 'text'}) .pipe( switchMap(xmlString => { let observableFactory = bindCallback(parseString); return observableFactory(xmlString, parserOptions); }), map(js => js[1].hotelBooking) ); } import { parseString } from 'xml2js';
  23. DEMO

  24. Interceptors

  25. Idea • Providing a hook • Modify requests and responses

    globally • Including Headers, e. g. for Auth. • Parsing Data Formats, like XML • Error Handling • Caching • …
  26. Chain of Responsibility Logic (HttpRequest) Interceptor Interceptor Request Response

  27. DEMO Sending Access Token for Auth Global Error Handler for

    Auth
  28. Conclusion observe: response, events, … responseType: text, blob, … Interceptor

    Chain The Dark Knight: Best Movie ever!
  29. Contact und Downloads [mail] manfred.steyer@SOFTWAREarchitekt.at [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer