Comunicación entre Angular y un Servidor utilizando una API REST y httpclient

En este proyecto vamos a realizar una serie de ejemplo de cómo trabajar con una API REST en Angular. Ya anteriormente hemos visto realizar este tipo de comunicaciones con la librería XMLHttpRequest pero realmente con este tutorial queremos evolucionar y mejorar nuestras aplicaciones utilizando HttpClient de Angular.

Con esta mejora lo que pretendemos es que la captación de eventos y las peticiones a la API sea mucho más rápidas y eficientes haciendo comunicaciones asíncronas y captando los errores producidos. La principal consecuencia de esta evolución la puedes percibir en la experiencia de usuario. La aplicación continue en funcionamiento mientras espera la respuesta de la petición realizada al servidor, es decir, tenemos peticiones en segundo plano.

El código utilizado en este artículo lo puedes obtener del siguiente repositorio https://github.com/al118345/TestComunicacionApiRest_Angular. El código utilizado en la API REST lo puedes obtener del siguiente repositorio: https://github.com/al118345/envio_email_api_python

Ejemplo petición GET

Antes de empezar, si quieres descargar el ejemplo explicado en este punto visita el siguiente enlace: https://github.com/al118345/TestComunicacionApiRest_Angular/tree/master/src/app/components/saludar-servidor

Esta petición es la más básica que podemos realizar. Por ejemplo podemos hacer una petición GET a nuestro servidor para que nos devuelva un hola, bienvenido.

La estructura la petición podría ser la siguiente:

Yo normalmente creo un servicio que posteriormente es utilizado desde el componente.ts, por ejemplo, en este caso he creado ConsultarapiService que lo he utilizado de la siguiente forma:

Por último, los eventos en la vista los podemos gestionar visualmente de la siguiente forma:

Prueba este ejemplo con la ejecución de este botón:

Fíjate que existe un tiempo de espera en que la aplicación no está parada y aparece un cargando. Esto se debe a que httpclient se encarga de realizar la llama asíncrona y, además, de gestionar todos los errores que puedan ocurrir

Ejemplo petición POST - Login

Antes de empezar, si quieres descargar el ejemplo explicado en este punto visita el siguiente enlace: https://github.com/al118345/TestComunicacionApiRest_Angular/tree/master/src/app/components/login

Otro ejemplo de petición POST es la de enviar un formulario con usuario y contraseña para realizar un login en nuestro servidor. Por ejemplo queremos realizar una autenticación OAuth2.0 (más información en Wikipedia https://es.wikipedia.org/wiki/OAuth) en nuestro servidor y, por lo tanto, enviamos el usuario y la contraseña con el siguiente comando:

Si se observa el código, lo que hacemos es enviar una petición POST con la información del usuario y contraseña para autentificarnos en el sistema.

El resultado obtenido es un JSON con un token de autenticación. Hemos definido un modelo usuario en el sistema con la siguiente configuración:

La respuesta del servidor es mapeada en el modelo usuario. En ese momento tenemos acceso al token que nos permite realizar las peticiones que queramos al servidor.

Ejemplo petición POST con filtrado de la respuesta recibida utilizando map.

Antes de empezar, si quieres descargar el ejemplo explicado en este punto visita el siguiente enlace: https://github.com/al118345/TestComunicacionApiRest_Angular/tree/master/src/app/components/obtener-json

El título de esta sección es extraño de explicar pero con un ejemplo se entenderá perfectamente. Realizamos una petición POST a la API y el servidor nos puede devolver una estructura de respuesta cómo la siguiente:

De la respuesta obtenida únicamente queremos obtener la información almacenada en la key datos. Para ello utilizamos el siguiente código.

Observa que la propia respuesta de la API tiene una key llamada datos. Esta key contiene la información que nos interesa y, por lo tanto, mapeamos la respuesta para que el método devuelva no el objeto completo sino la parte del Json que nos interesa.

A continuación muestro la vista correctamente configurada:

Y el componente.ts

Envío de ficheros a una API con un formulario angular y recepción del mismo.

Antes de empezar, si quieres descargar el ejemplo explicado en este punto visita el siguiente enlace: https://github.com/al118345/TestComunicacionApiRest_Angular/tree/master/src/app/components/cargarfichero

En esta circunstancia, entendemos que tenemos un formulario dónde obtenemos un fichero que debemos enviar a través de una api a nuestro servidor. Por ejemplo, podemos crear el siguiente formulario:

Posteriormente, el component.ts tiene que gestionar este fichero y almacenarlo en una variable Formgroup:

Una vez almacenado el fichero, podemos enviarlo a nuestro servidor a través de una petición a nuestra API cómo la siguiente implementación:

En este caso es un poco especial, porque envío un fichero y espero cómo respuesta espero otro modificado. Esta respuesta la quiero devolver directamente al usuario, por lo que la respuesta debe ser un observable. Además en la petición he añadido que responseType: 'blob' as 'json', es decir, devolveré un fichero en formato Json.

Esta respuesta la puedo devolver al usuario con el siguiente código:

Recepción de ficheros desde una API-REST en Angular.

Antes de empezar, si quieres descargar el ejemplo explicado en este punto visita el siguiente enlace: https://github.com/al118345/TestComunicacionApiRest_Angular/tree/master/src/app/components/descargar-pdf

Imaginad que tenemos programado una API REST en nuestro servidor que permita descargar un fichero pdf. Por ejemplo, tenemos el siguiente código python en la api:
La forma correcta de obtener el fichero de este método seria con un servicio.ts cómo el siguiente:

A continuación os proporciono un botón de ejemplo para descargar un fichero pdf.

Qué tiene la siguiente configuración en la vista:

Y el siguiente código en el componente.ts: