7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Angular

Guía del Principiante para Angular 4: HTTP

Read Time: 6 mins
This post is part of a series called Beginner's Guide to Angular 4.
Beginner's Guide to Angular: Routing

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

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.

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

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

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.

Incluye el HttpClientModule bajo la sección de importaciones.

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

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:

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:

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

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

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

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

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

Get Data ComponentGet Data ComponentGet Data Component

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.

Importa el módulo HttpClient al GetDataService de arriba.

Inicia el HttpClient en el constructor GetDataService.

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:

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

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.

Define el GetDataService como el proveedor de GetDataComponent.

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

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

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.

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:

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.

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:

Error Handler Angular HttpClientError Handler Angular HttpClientError Handler Angular HttpClient

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.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.