Biblioteca Online : ¡La Suscripción ENI por 9,90 € el primer mes!, con el código PRIMER9. Pulse aquí
¡Acceso ilimitado 24/7 a todos nuestros libros y vídeos! Descubra la Biblioteca Online ENI. Pulse aquí
  1. Libros
  2. Angular
  3. La petición HTTP
Extrait - Angular Desarrolle sus aplicaciones web con el framework JavaScript de Google
Extractos del libro
Angular Desarrolle sus aplicaciones web con el framework JavaScript de Google
2 opiniones
Volver a la página de compra del libro

La petición HTTP

Introducción

En este capítulo, vamos a ver cómo enviar, recuperar y tratar datos al través del protocolo HTTP. Veremos también cómo comunicarse de manera segura con este protocolo. Para terminar, se abordará el tema de las pruebas de los elementos que usan el servicio HTTP de Angular.

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...