La petición HTTP

Obtener y enviar datos

Con el objetivo de enviar y recibir datos, Angular proporciona un módulo HTTP. El módulo HTTP expone varios métodos que permiten enviar y recibir datos con consultas HTTP.

Con el objetivo de utilizar este módulo, hay que empezar importándolo en el módulo de la aplicación. Para esto, es suficiente con añadir la clase HttpClientModule en la propiedad imports del decorador @NgModule, del módulo principal de la aplicación:

import { BrowserModule } from '@angular/platform-browser';  
import { NgModule } from '@angular/core';  
import { HttpClientModule } from '@angular/common/http';  
import { AppComponent } from './app.component';  
  
@NgModule({  
  declarations: [  
    AppComponent  
  ],  
  imports: [  
    BrowserModule,  
    HttpClientModule  
  ],  
  bootstrap: [AppComponent]  
})  
export class AppModule { } 

El módulo HttpClientModule guarda una dependencia en la clase HttpClient. Una vez que se importa este módulo, es posible inyectar esta clase en todos los elementos que necesiten realizar consultas HTTP.

Los métodos expuestos por este módulo, se corresponden...

Transformar datos

Habitualmente, la recuperación y el tratamiento de los datos se realizan en los servicios, y es frecuente que el modelo recuperado por el API y el modelo que queremos tratar en la aplicación, sean diferentes. Es necesario hacer la proyección.

interface Manzana {  
 id: number;  
 name: string;  
}  
  
interface ManzanaApi {  
 id: number;  
 type: string;  
 color: string;  
} 

Con RxJS es muy sencillo modificar el tipo de retorno de un observable, permaneciendo en el flujo de tratamiento de este. En efecto, es suficiente con utilizar el pipe map. Para utilizarlo, es necesario importar el operador map desde RxJS. Este operador se encuentra en rxjs/operators.

import { Injectable } from "@angular/core";  
import { HttpClient } from "@angular/common/http";  
import { Observable } from "rxjs";  
  
import { map } from "rxjs/operators";  
  
@Injectable({  
 providedIn: "root"  
})  
export class ManzanaService {  
 baseUrl: string = "http://localhost:5000/api";  
 constructor(private http: HttpClient) {}  
  
 public getManzanas(): Observable<Manzana[]>...

Comunicar de manera segura

Habitualmente sucede que el API está protegido y necesita una autenticación. Independientemente del tipo de autenticación, es posible implementar “interceptores” para inyectar los headers en todas las consultas. En resumen, la idea es interceptar la consulta, tratarla si es necesario y reenviarla.

Supongamos que la autenticación se desarrolla con un JWT. Tenemos un AuthenticationService que expone un token que debemos enviar en un header del API.

import { Injectable } from '@angular/core';  
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } 
from '@angular/common/http';  
import { Observable } from 'rxjs';  
import { AuthenticationService } from './auth.servicio';  
  
@Injectable()  
export class JwtAuthInterceptor implements HttpInterceptor {  
 constructor(private authService: AuthenticationService) {}  
  
 intercept(request: HttpRequest<any>, next: HttpHandler):  
Observable<HttpEvent<any>> {  
   const token = this.authService.getToken();  
   if (token) {  
     request = request.clone({  
       setHeaders: {  
        Authorization:...

Simular la consulta HTTP

Cuando se prueba una aplicación Angular, es normal querer simular el servidor HTTP para evitar tener que desplegar un API durante la ejecución de las pruebas. Para evitar este comportamiento, es posible activar el servicio HttpClient básico, con el objetivo de que devuelva directamente los objetos estáticos definidos en el método de pruebas. Esto permite no depender de los datos en el servidor con el objetivo de validar el correcto funcionamiento de la aplicación.

Para inyectar el servicio a probar en la prueba, hay que utilizar el objeto TestBed.

    const servicio: ManzanaService = TestBed.get(ManzanaService); 

Este objeto está disponible en @angular/core/testing. Sirve para establecer un entorno de pruebas. Necesitamos el HttpClientModule, porque el servicio HttpClient se inyecta en nuestro ManzanaService. Para los problemas de prueba, en lugar de importar el HttpClientModule, vamos a importar el HttpClientTestingModule. Con este módulo, las llamadas HTTP no se van a hacer realmente, sino que solo se simularán.

Esto se debe realizar antes de cada prueba, gracias a beforeEach.

BeforeEach(() =>  
 TestBed.configureTestingModule({  
   imports: [HttpClientTestingModule]  
 })  
); 

El módulo HttpClientTestingModule permite recuperar una instancia de HttpTestingController. Va a ser muy útil por varias...