Guía del Principiante para Angular 4: HTTP

En el tutorial anterior, viste cómo implementar el ruteo en aplicaciones web Angular usando ruteo Angular.

En este tutorial, aprenderás cómo comunicarte con APIs web y servicios desde una aplicación Angular usando HttpClient de Angular.

HttpClient Angular

Usas el objeto  XMLHttpRequest(XHR) para hacer llamadas API del lado del servidor desde el navegador. El objeto XHR hace posible actualizar una porción de la página web sin recargar la página entera. Puedes enviar y recibir datos desde el servidor una vez que la página web ha cargado.

El HttpClient de angular proporciona un envoltorio para el objeto XHR, haciendo más sencillo hacer llamadas API desde la aplicación Angular.

Desde la documentación oficial:

Con HttpClient, @angular/common/http proporciona una API simplificada para funcionalidad HTTP para usar con aplicaciones Angular, construyendo encima de interfaz XMLHttpRequest expuesta por navegadores. Los beneficios adicionales de HttpClient incluyen soporte para pruebas, tipado fuerte de objetos de petición y respuesta, y mejor manejo de errores vía apis basadas en Observables.

Comenzando

Comenzarás clonando código fuente desde la primera parte de la serie de tutoriales.

git clone https://github.com/royagasthyan/AngularComponent.git

Una vez que tienes el código fuente, navega al directorio del proyecto e instala las dependencias requeridas.

cd AngularComponent
npm install

Después de que las dependencias han sido instaladas, inicia la aplicación tecleando el siguiente comando:

ng serve

Deberías ver la aplicación corriendo sobre http://localhost:4200/.

Para poder usar el módulo HttpClient en tu aplicación Angular, necesitas importarla primero en tu archivo app.module.ts.

Desde el directorio de proyecto, navega a src/app/app.module.ts. En el archivo app.module.ts, importa el HttpClientModule.

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

Incluye el HttpClientModule bajo la sección de importaciones.

imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule
  ]

Aquí está cómo luce el archivo app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { CalcComponent } from './calc/calc.component'
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    CalcComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ahora podrás usar HttpClientModule a lo largo de la aplicación Angular importándolo en el componente Angular particular.

Creando el Componente Angular

Comencemos creando el componente Angular. Crea una carpeta llamada get-data dentro de la carpeta src/app. Crea un archivo llamado get-data.component.ts y agrega el siguiente código:

import { Component } from '@angular/core';

@Component({
  selector: 'get-data',
  templateUrl: 'get-data.component.html',
  styleUrls: ['get-data.component.css']
})
export class GetDataComponent {

    constructor(){
  	
	}

}

Crea un archivo llamado get-data.component.html el cual serviría como una archivo de plantilla para el componente get-data. Agrega el siguiente código para el archivo get-data.component.html:

<h3>
    Get Data Component
</h3>

Importa el GetDataComponent en el archivo src/app/app.module.ts.

import { GetDataComponent } from './get-data/get-data.component';

Agrega el GetDataComponent al ngModule en el app.module.ts.

  declarations: [
    AppComponent,
    CalcComponent,
    GetDataComponent
  ]

Aquí está como luce el archivo app.module.ts modificado:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { CalcComponent } from './calc/calc.component';
import { GetDataComponent } from './get-data/get-data.component';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    CalcComponent,
    GetDataComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Agrega el selector de componente get-data al archivo app.component.html. Aquí está como luce:

<div style="text-align:center">
  <get-data></get-data>
</div>

Guarda los cambios de arriba e inicia el servidor. Podrás ver el componente get-data mostrado cuando la aplicación cargue.

Usando el Módulo HttpClient de Angular

Estarás usando el módulo HttpClient para hacer llamadas de API. Creemos un archivo separado para crear un servicio Angular para hacer la llamada API. Crea un archivo llamado get-data.service.ts. Agrega el siguiente código al archivo get-data.service.ts.

import { Injectable } from '@angular/core';

@Injectable()
export class GetDataService {

    constructor() {
        
    }

}

Importa el módulo HttpClient al GetDataService de arriba.

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

Inicia el HttpClient en el constructor GetDataService.

constructor(private http: HttpClient) {
    
}

Crea un método llamado call_api para hacer una llamada GET API en el archivo GetDataService. Harás uso de una API buscadora de sinónimos para hacer la llamada API. Aquí está cómo luce el método call_api:

call_api(term) {
    return this.http.get(this.url + term);
}

Aquí está cómo luce el archivo get-data.service.ts:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class GetDataService {

    url: string
    constructor(private http: HttpClient) {
        this.url = 'https://api.datamuse.com/words?ml='
    }

    call_api(term) {
        return this.http.get(this.url + term);
    }
}

Como se vio en la clase GetDataService de arriba, el método call_api devuelve un observable al cuál puedes suscribirte desde el GetDataComponent.

Para suscribir desde el constructor de GetDataComponent, necesitas importar el GetDataService en el GetDataComponent.

import { GetDataService } from './get-data.service';

Define el GetDataService como el proveedor de GetDataComponent.

@Component({
  selector: 'get-data',
  templateUrl: 'get-data.component.html',
  styleUrls: ['get-data.component.css'],
  providers:[ GetDataService ]
})

Vamos a suscribir desde el método constructor de GetDataComponent.

constructor(private dataService: GetDataService){
	this.dataService.call_api('hello').subscribe(response => {
		console.log('Response is ', response);
	})
}

Aquí está cómo luce el archivo get-data.component.ts:

import { Component } from '@angular/core';
import { GetDataService } from './get-data.service';

@Component({
  selector: 'get-data',
  templateUrl: 'get-data.component.html',
  styleUrls: ['get-data.component.css'],
  providers:[ GetDataService ]
})
export class GetDataComponent {

    constructor(private dataService: GetDataService){
		this.dataService.call_api('hello').subscribe(response => {
			console.log('Response is ', response);
		})
	}

}

Guarda los cambios de arriba y reinicia el servidor. Podrás ver el resultado registrado en la consola del navegador.

En el código de arriba, viste cómo hacer una petición GET API usando el HttpClient de Angular.

Para hacer peticiones POST, necesitas hacer uso del método http.post.

this.http.post(url, {key : value});

Como se vio en el código de arriba, necesitas proporcionar la URL post API y los datos a ser posteados como el segundo parámetro.

Manejando Errores Mientras Se Hacen Llamadas API

Siempre que hagas una llamada API, hay una posibilidad igual de encontrar un error. Para poder manejar errores cuando se hace una llamada API, necesitas agregar un manejador de error al método subscribe con el manejador de respuesta.

Aquí está cómo luce el código modificado de GetDataComponent:

constructor(private dataService: GetDataService){
	this.dataService.call_api('hello').subscribe(response => {
		console.log('Response is ', response);
	}, err => {
		console.log('Something went wrong ', err);
	})
}

Modifica la variable url en el archivo get-data.service.ts para crear una URL no existente que causaría un error cuando se hace la llamada API.

this.url = 'https://ai.datamuse.com/words?ml='

Guarda los cambios de arriba y reinicia el servidor. Revisa la consola del navegador y tendrás el método manejador de errores registrado.

El objeto de error contiene todos los detalles sobre el error tales como el código de error, mensaje de error, etc. Este da una visión más profunda a lo que salió mal con la llamada API. Aquí está cómo luce el registro en la consola del navegador:

Como se vio en el registro de consola de arriba, todos los errores de detalles pueden ser obtenidos desde el objeto de error.

Terminando

En este tutorial, viste cómo hacer uso del HttpClientModule para hacer llamadas API. Aprendiste cómo importar el HttpClientModule para hacer la petición GET y POST al servidor de APIs. Viste cómo manejar errores cuando se hace una llamada API.

¿Cómo fue tu experiencia tratando de aprender cómo hacer llamadas API usando HttpClientModule de Angular? Déjanos saber tus ideas en los comentarios de abajo.

El código fuente de este tutorial está disponible en GitHub.