Comunicación con un servidor HTTP mediante el módulo HttpClient

Servicios en Angular (III)

Photo by Kelvin Ang on Unsplash

En una aplicación Angular, la comunicación con un servidor para obtener o enviar datos es esencial. En este artículo, exploraremos cómo utilizar el módulo HttpClient para interactuar con un servidor en el contexto de un carrito de compras en una aplicación de comercio electrónico. Aprenderemos cómo realizar solicitudes HTTP y compartir datos de carrito a lo largo de la aplicación.

¿Qué es y por qué usar HttpClient?

HttpClient es un módulo proporcionado por Angular que facilita la comunicación entre una aplicación Angular y un servidor a través de solicitudes y respuestas HTTP. Proporciona métodos para enviar solicitudes HTTP (como GET, POST, PUT, DELETE, etc.) y manejar las respuestas del servidor de manera eficiente. Este módulo está diseñado para ayudar a los desarrolladores a realizar operaciones CRUD (Crear, Leer, Actualizar, Eliminar) y otros tipos de interacción con servicios web y APIs. Al usar HttpClient, obtenemos varios beneficios:

• Abstracción de las operaciones HTTP: HttpClient proporciona métodos para realizar solicitudes HTTP sin la necesidad de trabajar directamente con los objetos XMLHttpRequest o Fetch. Esto simplifica la comunicación con el servidor y oculta detalles de implementación.
• Gestión de observables: Todas las operaciones de HttpClient devuelven objetos observables, lo que permite trabajar de manera asíncrona y gestionar las respuestas de manera eficiente utilizando operadores RxJS.
• Manejo de respuestas: HttpClient maneja automáticamente el procesamiento de las respuestas del servidor, incluyendo el análisis de JSON y otras opciones de respuesta, lo que simplifica el trabajo con los datos recibidos.
• Tipado seguro: HttpClient permite especificar el tipo de datos que se espera recibir en la respuesta, lo que proporciona una mayor seguridad y evita errores de tipo en tiempo de compilación.
• Intercepción de solicitudes y respuestas: Se pueden agregar interceptores a las solicitudes y respuestas para realizar acciones como agregar cabeceras, manejar errores o realizar tareas globales antes o después de la comunicación con el servidor.

Cómo se utiliza HttpClient

Si recuerdas, en la clase anterior aprendimos a Compartir Datos entre Componentes Utilizando Servicios y utilizamos como ejemplo un carrito de compra de un ecommerce, pues bien, en este artículo vamos a refactorizarlo para que en lugar de almacenar los artículos del carrito en la “memoria” del navegador, podamos invocar a una API que se encargará de persistirlos en alguna base de datos.

Aquí lo importante es a destacar es la inyección de HttpClient el cual nos provee de los métodos comentados anteriormente. Estos métodos nos devuelven un objeto Observable

¿Qué es un observable?

Imagina que estás esperando un paquete en tu casa. Pero en lugar de esperar justo al lado de la puerta todo el tiempo, decides hacer otras cosas mientras estás atento por si llega el paquete. Eso es un poco como lo que hace un Observable en Angular.

Un Observable es como una especie de “detector de cambios” que está siempre listo para avisarte cuando algo sucede, pero no necesitas quedarte mirándolo todo el tiempo. Imagina que estás jugando con tus amigos y, de repente, uno de ellos te grita: “¡El paquete ha llegado!”. Tú estabas ocupado jugando, pero cuando escuchas eso, te emocionas y vas corriendo a ver tu paquete.

En Angular, cuando le pides al servidor algo usando HttpClient, en lugar de quedarte esperando, puedes decirle: "¡Oye, avísame cuando tengas una respuesta!". Entonces, puedes seguir haciendo otras cosas mientras el servidor trabaja en tu solicitud. Y cuando el servidor termine, te dirá: "¡Tengo la respuesta!". Entonces, como cuando tus amigos te gritaron, te emocionas y haces algo con esa respuesta.

Entonces, los métodos de HttpClient devuelven Observables porque son como esos "detectores de cambios" que te avisan cuando algo está listo. Los usamos porque nos ayudan a hacer muchas cosas emocionantes sin tener que esperar todo el tiempo mirando la puerta o el servidor.

¿Cómo interactuar con un Observable?

Primero, debes decirle al Observable que estás interesado en lo que tiene que decir. En Angular, haces esto suscribiéndote al Observable. Puedes hacerlo usando el método .subscribe() que recibe como parámetro una función.

Cuando algo ocurre y el Observable tiene información para ti, te avisará llamando a la función que le diste en la suscripción. En este paso, haces lo que necesitas con la información que obtuviste del Observable.

Finalmente, cuando ya no necesitas estar atento a lo que el Observable tiene que decir, puedes decirle que se detenga. Para hacer esto en Angular, usas el método .unsubscribe().

cart.component.ts

Nota: para este ejemplo hemos omitido desuscribirnos para mantener un ejemplo limpio. Una implementación más parecida a la realidad la veremos en nuestro proyecto AngularDex.

Pero… ¿y si el servidor no se encuentra disponible? o ¿si el usuario no tiene permisos para acceder al entrypoint? Toda esta gestión de errores las veremos en la siguiente clase ¡Te espero!