Diferencia entre HttpModule y HttpClientModule

Solución:

Utilizar el HttpClient clase 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 de http de @angular/http módulo con las siguientes mejoras:

• Los interceptores permiten insertar la lógica del middleware en la canalización
• Objetos de solicitud / respuesta inmutables
• Eventos de progreso tanto para la carga de solicitudes como para la descarga de respuestas

Puede leer sobre cómo funciona en la guía de Insider sobre interceptores y la mecánica de HttpClient en Angular.

• Acceso al cuerpo de respuesta síncrona y mecanografiada, incluida la compatibilidad con tipos de cuerpo JSON
• JSON es un valor predeterminado asumido y ya no necesita ser analizado explícitamente
• Verificación posterior a la solicitud y marco de prueba basado en descarga

En el futuro, el antiguo cliente http quedará obsoleto. Aquí están los enlaces al mensaje de confirmación y los documentos oficiales.

También preste atención a que el viejo http se inyectó usando Http token de clase en lugar del nuevo HttpClient:

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

@NgModule({
 imports: [
   BrowserModule,
   HttpModule
 ],
 ...

 class MyService() {
    constructor(http: Http) {...}

Además, nuevo HttpClient parece requerir tslib en tiempo de ejecución, así que tienes que instalarlo npm i tslib y actualizar system.config.js si estas usando SystemJS:

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

Y necesita agregar otro mapeo si usa SystemJS:

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

No quiero ser repetitivo, solo resumir de otra manera (características agregadas en el nuevo HttpClient):

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

Escribí un artículo, donde cubrí la diferencia entre el antiguo “http” y el nuevo “HttpClient”. El objetivo era explicarlo de la forma más sencilla posible.

Simplemente sobre el nuevo HttpClient en Angular

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

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

Estas son solo algunas diferencias con las que lidié al cambiar los servicios a httpclient en mi proyecto (tomando prestado del artículo que mencioné):

Importador

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

Solicitar y analizar la respuesta:

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

@ angular / común / http

 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 tiene que extraer los datos devueltos explícitamente; de forma predeterminada, si los datos que obtiene son del tipo 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 responseType en la solicitud. Al igual que:

Realización de la solicitud GET HTTP con responseType opción:

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

Añadiendo interceptor

También usé interceptores para agregar el token de mi autorización a cada solicitud, referencia.

al igual que:

@Injectable()
export class MyFirstInterceptor implements HttpInterceptor {

    constructor(private currentUserService: CurrentUserService) { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        // 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 buena!

---

---

Utiliza Nuestro Buscador