Angular 5 - Http deprecado y reemplazado por HttpClient

Estuve conversando el otro día con un prospecto de los cursos de JoeDayz sobre Angular y el me preguntaba si tenía un curso de Angular 5.

Yo le comente que no , pero, que tenía la versión 2 y que la base es la misma y luego podría ver las diferencias.

Al final se quedo en prospecto, porque, quería un curso versión 5. Así que me quede con la espina y decidí actualizar el curso que tenemos.

Angular es mantenida por Google y la versión 5 fue anunciada el 1ro. de  Noviembre del 2017. Pero, que busca Google con este release. Pues, hacerla mas pequeña y más rápida. Cool.

Así que este post es uno de varios por actualizar mi curso.

Se depreco HTTP y ahora se debe usar HttpClient (desde la 4.3.0).

Antes se usaba Http 

Ahora se recomienda HttpClient que se encuentra en @angular/common/http

El nuevo servicio HttpClient te devuelve directamente el body de la respuesta, parseado como JSON. 

Pero si quieres igual acceder al objeto response debes aplicar:

http.get('/api/passengers', {observe: 'response'})

Si quisieras usar otro tipo de respuesta:

• arraybuffer
• blog
• json (es default)
• text

this.http.get('…', { responseType: 'text' });

Respuestas Tipadas

Gracias a los genéricos de TypeScript ya puedes tipificar tu llamada HTTP para que la respuesta sea del mismo tipo.

interface PassengerResponse {
  results: Passenger[];
}
this.http.get< PassengerResponse >('/api/passengers').subscribe(data => {
  console.log(data.results);
});

Interceptors

Para entender que es un interceptor en Angular, imaginemos que deseamos agregar un token de autenticación a las peticiones que tenemos. Podemos centralizar esta lógica en un interceptor, y así no duplicamos código. 

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpEventType } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

export class AuthInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest, next: HttpHandler): Observable> {
    const authReq = req.clone({
      setHeaders: { Authorization: `Bearer authtest` }
    });
    return next.handle(authReq);
  }

}

El método intercept recibe un HttpRequest y debe retornar un stream de HttpEvent de tipo HttpResponse. Cómo los objetos Request y Response son inmutables, nos hace más facil el test. 

NOTA: Cómo los objetos HttpRequest, HttpHeaders y HttpParams son inmutables, por eso se ve en el código anterior como se crear un nuevo objeto para incluir las modificaciones. Eso se hace con req.clone().

Luego registramos el Interceptor en el app.module.ts:

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

@NgModule({
  imports: [],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
  ]
})
export class AppModule {}

En caso quieras mas interceptors declaralos como en un array:

providers: [
  { provide: HTTP_INTERCEPTORS, useClass: First, multi: true },
  { provide: HTTP_INTERCEPTORS, useClass: Second, multi: true }
]

Eventos de Progreso

Otra característica interesante es que podemos conocer el progreso de las subida de nuestras peticiones y/o descargas de sus respuestas. Esto gracias al reportProgress.

const req = new HttpRequest('POST', 'upload/file', file, {
  requestProgress: true
});
this.http.request(req)
  .subscribe(event => {
    if (event.type === HttpEventType.UploadProgress) {
      console.log(event.total, event.loaded);
    }
  });

RxJS 5.5

Esta versión de Angular 5 viene con una versión más actual de RxJS para trabajar con Observables, la versión 5.5.

Antes importamos así los operadores map y filter:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
names = allUserData
.map(user => user.name)
.filter(name => name);

Ahora con RxJS 5.5 los importamos directamente:

import { Observable } from 'rxjs/Observable';
import { map, filter } from 'rxjs/operators';
names = allUserData.pipe(
  map(user => user.name),
  filter(name => name),
);

En siguientes post ire contandoles que cambios trae esta versión.

Pero, si quieres ver los cambios aplicados en un ejemplo, te comparto este url de github.

Enjoy!

Joe