Angular 2 avanzado: Trabajo con APIs

Administrar errores en Angular

¡Prueba gratis durante 10 días

nuestros 1220 cursos !

Prueba gratis Mostrar modalidades de suscripción
Una aplicación, en el mundo real, siempre tiene que enfrentar problemas, errores o situaciones desconocidas. En esta lección vamos a implementar controles para evitar desplegar resultados incorrectos y desplegar alertas en caso de que la API no funcione correctamente.
10:54

Transcripción

En esta lección vamos a aprender cómo hacer manejo de los errores dentro de una aplicación Angular que esté trabajando con datos externos, como por ejemplo una API REST. En este caso yo estoy utilizando una aplicación que despliega los registros que se encuentran en una base de datos y estoy obteniendo estos datos a partir de una API REST. Ahora vamos a hacer algunos controles para manejar errores comunes. Uno de los errores más comunes es que obtengamos un valor, por ejemplo el que define cada uno los ítems de esta lista y que ese valor venga vacío. Vamos a entrar a la aplicación para manejar este tipo de errores. Acá yo estoy trabajando dentro del componente llamado "tareas", específicamente en su plantilla llamado "tareas. component. html". Esta es la plantilla que está desplegando los contenidos de mi aplicación donde tenemos una lista y esa lista está mostrando, por cada uno los ítems que recibimos de la base de datos, está mostrando un componente que despliega cada una de las líneas en que se encuentran las tareas de nuestra aplicación. También tenemos una entrada de datos y un botón que nos permite crear nuevos registros. Lo primero que voy a hacer es remover este elemento de la lista y solo lo vamos a dejar con elementos "li". Otra cosa que voy a hacer es que voy a restringir que esta lista se muestre únicamente cuando tenemos valores para desplegar. O sea, en este caso la lista está desplegando valores a partir del objeto llamado "tareas", así que voy a utilizar la directiva "ngIf" para desplegar valores únicamente cuando existe el objeto llamado "tareas". Y voy a utilizar también el operador "and" para evaluar no solo esta condición sino también incluir otra condición llamada "tareas" y vamos a analizar que el objeto "tareas" sea mayor a cero, para asegurarnos de que no vamos a desplegar listas vacías. Así que vamos a utilizar "tareas. length" y que esto sea mayor que cero. Así nos aseguramos de que al menos vamos a tener un ítem para desplegar y que vale la pena mostrar esta lista. Guardamos la información, revisamos nuestra aplicación y vemos que ahora se está mostrando la lista exactamente igual que antes, pero únicamente se va a mostrar cuando nosotros tenemos ítems que desplegar. Yo voy a borrar toda la información que está en ella y ahora la lista ya no se está mostrando del todo. Vamos a representar acá un mensaje en caso de que nuestra lista no tenga ningún elemento. Entonces voy a incluir acá un "div" y este "div" va a tener un "ngIf" muy similar al que nosotros estábamos trabajando para la lista. Entonces vamos a mostrarlo en caso de que "tareas" no se encuentre disponible. Y vamos a cambiar el operador "&" por un operador "or" y lo que vamos a hacer es que vamos a aplicar cualquiera de estas dos condicionales. O sea, si "tareas" no está definido o si el tamaño es menor o igual a cero. Entonces si "tareas" no existe o si "tareas" no tiene ningún valor, vamos a mostrar este "div" y básicamente dice "Lista vacía". Guardamos y vamos a revisar nuestra aplicación. Vemos que acá nos aparece un texto que dice "Lista vacía". Vamos a cambiarlo a un "h1" para que se destaque un poco más la información. Guardamos, desplegamos y ahora sí tenemos una "Lista vacía". Y si incluimos información, vamos a poner acá "prueba", guardamos y vemos que se desaparece la información de "Lista vacía" porque la condicional que estábamos aplicando ya no es válida y el valor de la lista ya podemos desplegarlo, así que se desaparece el elemento de "Lista vacía". Volvemos a borrar y vemos que me parece la información de "Lista vacía". Esto es una forma en que nosotros tenemos de desplegar información, por ejemplo errores, cuando no tenemos datos pero tenemos otro tipo de opción en la que podemos también tener errores en nuestra aplicación y es cuando del todo no tenemos acceso al servicio. Por ejemplo, ¿qué pasa si nuestra API, en este caso la API RESTful, no está funcionando? Vamos a copiar toda la información que se encuentra dentro de esta plantilla y la vamos a poner dentro de un "div", que también vamos a utilizar como una condicional para desplegar la información de esta aplicación. En este caso vamos a desplegar la información de nuestra aplicación únicamente si tenemos acceso o una conexión válida a nuestra API. Así que yo voy a poner acá este "div" y en este caso vamos a poner que: si tenemos un error, así que vamos a poner si la directiva "ngIf" encuentra, o más bien en este caso no encuentra error, vamos a desplegar la información regular de nuestra aplicación. Ahora también vamos a poner otra condicional. Voy a copiar la que he creado al inicio de la aplicación y vamos a decir que en caso de que tengamos un error, que es el caso opuesto, vamos a mostrar un mensaje. El mensaje que vamos a mostrar es... Ya tengo un código previamente definido y vamos a definir que en caso de que tengamos un error en la aplicación, vamos a utilizar estas clases de Bootstrap que nos van a decir que la aplicación no está disponible. Vamos a guardar y vamos a ver nuestra aplicación y por ahora no se está mostrando ningún valor. Esto, porque no he definido cuál es el parámetro para crear el valor de error. Así que vamos a ir a la aplicación y vamos a crear este valor "error" únicamente si sucede algo dentro de nuestra aplicación. Vamos a pasar a la sección del componente donde tenemos el código y vamos a examinar en este caso el método "peticiónExterna", que es donde yo estoy haciendo la invocación a mi API. También acá yo estoy ejecutando mi servidor en Node, así que lo voy a detener con el teclado Control + C. Vamos a aceptar que se detenga y ya mi servidor no está funcionando más. Vamos a revisar la aplicación, voy a refrescar y por ahora no tengo ningún error dentro de mi aplicación, solo me aparece una lista vacía, pero si trato de enviar información no voy a poder crear ningún registro. Y si reviso dentro del inspector, vamos a ver que acá estamos teniendo un error que nos está diciendo que no se puede conectar a la aplicación porque no está disponible la entrada a la API que nosotros hemos definido que ejecute cuando arranca la aplicación. Vamos entonces a crear un manejo de errores. Para eso vamos a necesitar modificar ligeramente la forma en que estamos haciendo el llamado a nuestras peticiones a la API. En este caso yo estoy utilizando esta sintaxis para la promesa "subscribe", donde estoy creando un valor que en este caso va a ser "respuesta" y que va a ejecutar una función. Vamos a cambiarlo a modalidad de una línea, para que te sea más fácil de leer los cambios que voy a hacer. Estoy dejando exactamente los mismos elementos pero lo estoy poniendo todo en una sola línea, OK. Ahora lo que tenemos acá es un valor que está ejecutando una función. Estos son los valores que vamos a obtener cuando tengamos una respuesta de la API. Ahora, ¿qué pasa si no tenemos una respuesta de la API? Bueno, vamos a modificar entonces ligeramente la sintaxis acá y voy a eliminar las llaves. También voy a agregar una coma y lo que voy a hacer es que voy a agregar otra acción para ejecutarse en caso de que tengamos un error. Así que voy a crear otro valor, en este caso que vamos a capturar con el parámetro "error" y vamos a decir que también sea de tipo en este caso "response". Va a ser una de las posibles respuestas que nos puede dar esta aplicación, la primera va a ser una respuesta de que todo está funcionando bien, pero la segunda, en el caso de que falle algo, se va a ejecutar y nos va a dar la opción de manejar un error. En este caso, si todo funciona correctamente, yo estoy asignando los valores de la respuesta a un valor llamado "tareas", que es el que está desplegando la lista. Lo que voy a hacer acá es que voy a asignar "this error" y vamos a a asignar el valor de "error" que me está llegando desde la aplicación. Ahora tengo un error de sintaxis porque me está diciendo que'error' no está declarado en mi aplicación. Así que vamos a crear "error" y le vamos a asignar el tipo de dato "any" para estar seguros de que vamos a soportar cualquier formato que nos llegue. Y ahora sí, nuestra aplicación ya está desplegando el valor "error". Vamos a guardar, vamos a revisar y recordemos que en este momento la base de datos no está funcionando, de hecho ya se está desplegando el mensaje de error. Voy a actualizar la aplicación, para que veas, estamos tratando de conectarnos y en el momento en que no tenemos respuesta, mostramos un mensaje de error que dice que la aplicación no está disponible. Voy a activar otra vez mi servidor de Node. Ahora sí, la API está disponible. Vamos a actualizar y vemos que como no se está generando ningún error, mi aplicación está funcionando. Ahora sí, yo puedo volver a agregar ítems, porque mi aplicación puede conectarse con la base de datos. Volvemos a desconectarla solamente para que veas cómo se ve el mensaje de error. Vuelvo a desconectar acá con Control + C, desconecto, entro en la aplicación, refresco y vemos que en el momento en que la aplicación se entera de que no tenemos acceso, nos muestra un error. Esa es la manera en que nosotros podemos administrar los errores dentro de nuestra aplicación y nunca dejarla sin el manejo de ellos, porque simplemente lo que va a pasar es que la aplicación se congela y el usuario va a pensar que nosotros tenemos un error de programación, cuando en realidad lo que está sucediendo es que tenemos un error dentro de un servicio completamente externo a nosotros.

Angular 2 avanzado: Trabajo con APIs

Comprende el funcionamiento de una API y cómo llevar a cabo sus procesos, así como controlar su funcionamiento mediante Angular 2, gracias a este ejemplo práctico.

3:02 horas (29 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:4/05/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.