Differenza tra HTTP e HTTPClient in angular 4?

Voglio sapere quale utilizzare per creare un servizio Web fittizio per testare il programma Angular?

Utilizzare la class HttpClient da HttpClientModule se si utilizza Angular 4.3.xe versioni successive:

 import { HttpClientModule } from '@angular/common/http'; @NgModule({ imports: [ BrowserModule, HttpClientModule ], ... class MyService() { constructor(http: HttpClient) {...} 

È una versione aggiornata del modulo http da @angular/http con i seguenti miglioramenti:

  • Gli intercettori consentono di inserire la logica del middleware nella pipeline
  • Oggetti di richiesta / risposta immutabili
  • Eventi di progresso sia per il download della richiesta che per il download della risposta

Puoi leggere come funziona nella guida di Insider sugli interceptor e la meccanica HttpClient in Angular .

  • Accesso al corpo di risposta sincrono e digitato, incluso il supporto per i tipi di corpo JSON
  • JSON è un valore predefinito presunto e non deve più essere analizzato in modo esplicito
  • Verifica post-richiesta e framework di test basato su flush

Andando avanti, il vecchio client http sarà deprecato. Ecco i link al messaggio di commit e ai documenti ufficiali .

HttpClient attenzione anche al fatto che il vecchio http è stato iniettato usando un token di class Http invece del nuovo HttpClient :

 import { HttpModule } from '@angular/http'; @NgModule({ imports: [ BrowserModule, HttpModule ], ... class MyService() { constructor(http: Http) {...} 

Inoltre, il nuovo HttpClient sembra richiedere tslib in runtime, quindi devi installarlo npm i tslib e aggiornare system.config.js se stai usando SystemJS :

 map: { ... 'tslib': 'npm:tslib/tslib.js', 

E devi aggiungere un’altra mapping se usi SystemJS:

 '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js', 

Non voglio essere ripetitivo, ma solo per riassumere in altro modo:

  • Conversione automatica da JSON a un object
  • Definizione del tipo di risposta
  • Sparatoria degli eventi
  • Sintassi semplificata per le intestazioni
  • intercettori

Ho scritto un articolo, in cui ho coperto la differenza tra il vecchio “http” e il nuovo “HttpClient”. L’objective era di spiegarlo nel modo più semplice ansible.

Semplicemente su nuovo HttpClient in Angular

Questo è un buon riferimento, mi ha aiutato a passare le mie richieste http a httpClient

https://blog.hackages.io/angular-http-httpclient-same-but-different-86a50bbcc450

Confronta i due in termini di differenze e fornisce esempi di codice.

Queste sono solo alcune delle differenze che ho affrontato mentre cambiavo i servizi a httpclient nel mio progetto (prendendo a prestito dall’articolo che ho menzionato):

importazione

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

richiesta e risposta di analisi

http

  this.http.get(url) // Extract the data in HTTP Response (parsing) .map((response: Response) => response.json() as GithubUser) .subscribe((data: GithubUser) => { // Display the result console.log('TJ user data', data); }); 

HttpClient:

  this.http.get(url) .subscribe((data: GithubUser) => { // Data extraction from the HTTP response is already done // Display the result console.log('TJ user data', data); }); 

Nota: non è più necessario disporre di dati esplicitamente, per impostazione predefinita se i dati restituiti sono JSON, non devi fare altro, ma se devi analizzare qualsiasi altro tipo di risposta come testo o blob, assicurati di aggiungere il responseType in la richiesta. così:

// Effettua la richiesta HTTP GET con l’opzione responseType

  this.http.get(url, {responseType: 'blob'}) .subscribe((data) => { // Data extraction from the HTTP response is already done // Display the result console.log('TJ user data', data); }); 

Ho anche usato gli intercettori per aggiungere il token per la mia authorization ad ogni richiesta:

questo è un buon riferimento: https://offering.solutions/blog/articles/2017/07/19/angular-2-new-http-interface-with-interceptors/

così:

 @Injectable() export class MyFirstInterceptor implements HttpInterceptor { constructor(private currentUserService: CurrentUserService) { } intercept(req: HttpRequest, next: HttpHandler): Observable> { // get the token from a service const token: string = this.currentUserService.token; // add it if we have one if (token) { req = req.clone({ headers: req.headers.set('Authorization', 'Bearer ' + token) }); } // if this is a login-request the header is // already set to x/www/formurl/encoded. // so if we already have a content-type, do not // set it, but if we don't have one, set it to // default --> json if (!req.headers.has('Content-Type')) { req = req.clone({ headers: req.headers.set('Content-Type', 'application/json') }); } // setting the accept header req = req.clone({ headers: req.headers.set('Accept', 'application/json') }); return next.handle(req); } } 

È un aggiornamento piuttosto carino!