Diferencia entre HTTP y HTTPClient en angular 4?

Quiero saber cuál usar para crear un servicio web simulado para probar el progtwig Angular.

Utilice la clase HttpClient de HttpClientModule si está utilizando Angular 4.3.xy superior:

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

Es una versión mejorada del módulo http from @angular/http con las siguientes mejoras:

  • Los interceptores permiten que la lógica del middleware se inserte en la tubería
  • Objetos de solicitud / respuesta inmutables
  • Eventos de progreso para carga de solicitud y descarga de respuesta

Puede leer sobre cómo funciona en Insider’s guide en interceptores y HttpClient mechanics en Angular .

  • Acceso al cuerpo de respuesta síncrono y tipado, que incluye soporte para los tipos de cuerpos JSON
  • JSON es un supuesto predeterminado y ya no necesita ser analizado explícitamente
  • Marco de prueba basado en verificación y verificación posterior a la solicitud

En el futuro, el antiguo cliente http estará en desuso. Aquí están los enlaces al mensaje de compromiso y los documentos oficiales .

También preste atención a que se inyectó el antiguo http utilizando el token de la clase Http lugar del nuevo HttpClient :

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

Además, el nuevo HttpClient parece requerir tslib en tiempo de ejecución, por lo que debe instalarlo npm i tslib y actualizar system.config.js si está utilizando SystemJS :

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

Y necesita agregar otra asignación si usa SystemJS:

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

No quiero ser repetitivo, sino solo resumir de otra manera:

  • Conversión automática de JSON a un objeto
  • Definición del tipo de respuesta
  • Evento de disparo
  • Sintaxis simplificada para encabezados
  • Interceptores

Escribí un artículo, donde cubrí la diferencia entre el viejo “http” y el nuevo “HttpClient”. El objective era explicarlo de la manera más fácil posible.

Simplemente acerca de HttpClient nuevo en Angular

Esta es una buena referencia, me ayudó a cambiar mis solicitudes http a httpClient

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

Compara los dos en términos de diferencias y da ejemplos de código.

Esta es solo una de las pocas diferencias con las que trabajé al cambiar los servicios a httpclient en mi proyecto (tomando prestado el artículo que mencioné):

importador

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

solicitar y analizar la respuesta

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: ya no necesita datos de forma explícita, de manera predeterminada, si los datos que recibe son JSON, no tiene que hacer nada adicional, pero si necesita analizar cualquier otro tipo de respuesta como texto o blob, asegúrese de agregar el tipo de respuesta en la solicitud. al igual que:

// Hacer la solicitud GET HTTP con la opción 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); }); 

También utilicé interceptores para agregar el token para mi autorización a cada solicitud:

esta es una buena referencia: https://offering.solutions/blog/articles/2017/07/19/angular-2-new-http-interface-with-interceptors/

al igual que:

 @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); } } 

¡Es una mejora bastante agradable!