Blog

Angular : Http VS HttpClient

#Angular

Illustration de Angular : Http VS HttpClient

Quelles sont les améliorations apportées par ce nouveau module ?

Importation

import {HttpModule} from '@angular/http';
import {HttpClientModule} from '@angular/common/http';

Get JSON data

this.http.get(url)
    .map((response:  Response) =>  response.json())
    .subscribe((data) => { console.log(data); }
this.http.get(url)
.subscribe((data) => { console.log(data); }

Get non-JSON data

this.http.get(url)
    .map((response:  Response) =>  response.text())
    .subscribe((data) => { console.log(data); }
// Can be .json(), .text(), .arrayBuffer(), .blob()
this.http.get(url, {responseType: 'blob'})
.subscribe((data) => { console.log(data); }
// Default json, can be json, text, arrayBuffer, blob

Get headers

this.http.get(url)
.subscribe((response:  Response) => {
    console.log('HTTP response', response);
    console.log('HTTP response : Headers', response.headers);
    console.log('HTTP response : status', response.status);
    console.log('HTTP response : url', response.url);
    console.log('HTTP response : body', response.json());
});
this.http.get(url, { observe: 'response' })
.subscribe((response: HttpResponse) => {
    console.log('HTTP response', response);
    console.log('HTTP response : Headers', response.headers);
    console.log('HTTP response : status', response.status);
    console.log('HTTP response : url', response.url);
    console.log('HTTP response : body', response.body);
});
// Default body, can be body, response, events