Saltar al contenido

Angular HttpClient: la guía práctica

Angular HttpClient: la guía práctica

El módulo Angular HttpClient se introdujo desde Angular 4.3. Esta nueva API está disponible en el paquete @ angular / common / http y está destinada a reemplazar el antiguo HttpModule. En esta guía de HttpClient, aprenderemos cómo usar el método HttpClient.Get para consultar una API y obtener datos para nuestra aplicación. Al igual que el HtppModule anterior, HttpClientModule también usa RxJs observables.

También lea mis otras guías sobre cómo crear componentes, crear e inyectar servicios, usar tuberías y pautas para crear aplicaciones angulares.

Esta guía es parte de Angular: The Ultimate Guide

Angular HttpClient: que es y como funciona

HttpClient es un módulo separado en Angular y está disponible en el paquete @ angular / common / http. Todo lo que tiene que hacer es importarlo e inyectarlo en su componente / servicio. Más tarde, puede usar el método HttpClient.Get para enviar una solicitud HTTP y esperar la respuesta con una suscripción. Cuando llegue la respuesta, puede enviarla al objeto deseado y luego ver el resultado.

Veamos las diferentes etapas

Importe el módulo HttpClient a su módulo principal

Debe importarlo al módulo app.module. También deberá agregarlo a la tabla de importación.

import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
 
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        HttpClientModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Importar el módulo HttpClient en un componente / servicio

Importar módulos @ angular / common / http & rxjs / Rx en componente / servicio

import { HttpClient } from '@angular/common/http';
import { Observable} from 'rxjs/Rx';

Inyecte HttpClient en el componente / servicio

constructor(public http: HttpClient) {
}

Llame al método HttpClient.Get

Envíe la solicitud HttpClient.get a su punto final. El método HttpClient.Get devuelve un observable, con una suscripción. El resultado llega en formato JSON y se muestra al usuario.

public getData() {
  this.HttpClient.get(this.baseUrl+'targetUrl')
           .subscribe(data => {
               this.data= data;
           },
           error => {
 
           }
  );
}

Es todo.

HttpClient.get

HttpClient.get envía la solicitud HTTP Get al punto final y analiza el resultado devuelto en el tipo deseado. El tipo de respuesta predeterminado es JSON. Si desea otro tipo, debe especificarlo explícitamente utilizando el parámetro responseType.

Configuración de HttpClient.get

Le permite agregar encabezados HTTP a las solicitudes salientes.

observar

El método HttpClient.get devuelve el cuerpo de la respuesta analizada como JSON (o del tipo especificado en responseType). A veces puede ser necesario leer la respuesta completa con los encabezados y códigos de estado. Para hacer esto, puede establecer la propiedad observ en la respuesta.

Las opciones permitidas son:

  • una respuesta que devuelve la respuesta completa
  • un cuerpo que solo devuelve el cuerpo
  • evento que devuelve una respuesta de evento
configuraciones

Esto nos permite agregar parámetros de URL a la solicitud de obtención.

reportProgress

Esta es una propiedad booleana. Configúrelo en verdadero si desea recibir una notificación del progreso de la solicitud. Esto es muy útil cuando tiene una gran cantidad de datos para descargar (o descargar) y desea que el usuario le muestre el progreso.

responseType

La respuesta predeterminada recibida es de tipo Json. Si desea un tipo de respuesta diferente, debe utilizar este parámetro. Las opciones permitidas son arraybuffer, BLOB, JSON y text.

con credenciales

Es de tipo booleano. Si el valor es verdadero, HttpClient.get solicitará datos con credenciales

Retorno de httpClient.Get

Cuando usa el servicio HttpClient para obtener datos, en realidad devuelve un Observable.

¿Qué es un observable

Un observable nos ayuda a tratar con datos asincrónicos. Puede pensar en Observable como una matriz de objetos devueltos asincrónicamente Observable implementar patrones de diseño de observador, en el que Observable mantiene una lista de dependencias, llamadas observadores, y notifica automáticamente cualquier cambio de estado, generalmente llamando a uno de sus métodos.