DonkeyCode
Menu

Le blog Développement Angular

Angular : Http VS HttpClient

Http et HttpClient dans Angular : ce que le nouveau module change sur le typage, les intercepteurs et la gestion des erreurs, et comment migrer.

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
En parler avec nous

Vous vous posez la même question ?

Racontez-nous votre situation. On vous dira dans le même échange si c'est un sujet pour nous, et par quoi on commencerait.

Parlons de votre projet

ou choisissez un créneau tout de suite