Vamos a actualizar nuestra Política de privacidad próximamente. Te recomendamos consultar el avance.

Angular esencial

Manejo de errores de conexión HTTP

¡Prueba gratis durante 10 días

nuestros 1290 cursos !

Prueba gratis Mostrar modalidades de suscripción
En una aplicación, en el mundo real, siempre tenemos 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 carga externa de archivos no funcione correctamente.
09:25

Transcripción

En esta lección, aprenderemos cómo hacer el manejo de errores cuando hacemos una carga de archivos externos. Estoy trabajando una aplicación que está desplegando una lista de libros a partir de un archivo externo. Te voy a mostrar el código de mi aplicación y acá, en este caso, estoy trabajando un componente llamado'lista-de-libros. component'. Y en este caso tengo una variable llamada'libros' que se está populando a partir de esta llamada que tengo acá de'http'. Básicamente, lo que estoy haciendo es que estoy invocando este archivo que te estoy marcando acá llamado'lista-de-libros. json' y a partir de la información que viene dentro de este libro, estoy utilizando un observable, estoy leyendo la respuesta. Y una vez que tenga esa información, a través de una llamada asíncrona, voy a asignar el valor de esta variable'libros' a partir de la información que me llega desde el archivo que se llama'lista-de-libros . json'. Acá es donde está la información de este archivo 'lista-de-libros'. Ahora, sabiendo que esa es la estructura básica de mi aplicación, ¿qué pasaría si yo invoco, por ejemplo, incorrectamente el nombre del archivo? Por ejemplo, en vez de'lista-de-libros. json', yo me equivoco y pongo una extensión incorrecta. Vamos a guardar y vamos a ver qué es lo que ocurre en mi aplicación. Vemos que ya no me está cargando la información que viene del archivo externo. Al no tener esa información, no puede desplegar la lista y mi aplicación se ve incompleta. El asunto es que si, por ejemplo, revisamos a través de clic derecho, Inspect, vamos a ver acá, en la sección Network, voy a refrescar y vemos que, efectivamente, acá me está dando un error 404. Y de paso que esto te sirva como un tip para poder depurar tus aplicaciones. En caso de que tengas algún problema, siempre repite este proceso que acabo de hacer para poder asegurarte de que todo está cargándose correctamente. Ahora, en este caso, tengo un error en el nombre del archivo y por eso lo estoy cargando mal, pero puede haber muchísimos posibles errores, por ejemplo, que el archivo no se encuentre disponible en Internet, así yo tenga correctamente nombrado el archivo en mi aplicación, puede ser que el archivo no esté en Internet, o que el servidor no esté funcionando en ese momento o que el usuario no tenga conexión a Internet. Pueden ser muchos detalles, pero el asunto es que, por cualquiera que sea la razón, no me está mostrando la información de mi aplicación. Y en este caso lo que ocurre es que el usuario no tiene por qué saber qué es lo que ha pasado y sencillamente ellos piensan que nuestra aplicación está incompleta o no funciona o que la he programado mal. Vamos a hacer un manejo de errores cada vez que, por cualquier razón que sea, nosotros no podamos cargar el archivo externo que necesitemos para desplegar información. Esto lo vamos a hacer: vamos a modificar acá el código y vamos a ir al componente que está haciendo la carga de archivos externos. Vamos a dejar este nombre incorrecto, simplemente para mantener ese error. Ahora, en este caso yo estoy utilizando acá este observable a través del método'subscribe', y tengo definido en esta línea una acción que se va a ejecutar a partir de que el archivo se encuentre correctamente. Ahora, la sintaxis que nos permite Angular es que simplemente agrego una coma y voy a copiar exactamente esta línea. Y si agrego una segunda línea acá utilizando el mismo formato, esta segunda línea se va a ejecutar en caso de que no pueda ejecutar esta primera. Recordemos que esta primera línea lo que hace es que se ejecute en caso de que la información llegue correctamente. La segunda línea se va a ejecutar en caso de que la información no llegue. Así que, por ejemplo, podemos poner diferentes datos como, por ejemplo, acá: 'respuesta'. Nosotros podríamos asignar una variable: 'this'punto 'error' 'http', por ejemplo, y que esta variable tenga la información de'respuesta' si quisiéramos, por ejemplo, desplegar la información de qué es lo que ocurre. Vamos a hacerlo rápidamente y puedo hacer, por ejemplo, algo como esto: 'console'punto'log' y que, en caso de que tengamos un error, puedo poner acá "error de Internet" coma, y en este caso envío la información de'respuesta'para poder depurar. Guardamos, veamos el resultado. Y acá me está mostrando el mismo error, pero si voy aca a la consola me dice que tenemos un error de Internet y me dice cuál es el error que está ocurriendo. En este caso 'Not Found', o sea, que el archivo no se encuentra en el lugar en que yo dije que se debía encontrar. Ahora, sabiendo esto, podemos realizar diferentes procesos, por ejemplo, saber que cuando llega acá el estatus 404 me muestre un error específico, algo como esto, por ejemplo. Podemos hacer que'respuesta'punto'status' y definir, por ejemplo, una condicional: 'if' 'respuesta'punto'status' es igual a '404', entonces que ejecute acá una acción. Ahora yo voy a mantener un poco más simple este código y lo que voy a hacer es que en vez de utilizar esta consola y esta condicional, lo que voy a hacer es que voy a generar una variable que, en este caso, va a ser un valor booleano. Los valores booleanos, básicamente, lo que hacen es que nos almacenan información que sea "cierto" o "falso". En este caso, vamos a crear una variable que se va a llamar 'errorHttp'y la vamos a poner acá, al inicio de nuestro documento, 'errorHttp', que va a ser de tipo booleano. En este caso, al declarar esta variable, vamos a decir que esté disponible, pero hasta que no le asignemos un valor la variable por defecto va a dar un valor de'false'. Ahora, sabiendo eso, yo le voy a asignar, hasta que tenga la información de respuesta y en este caso en la segunda línea, yo voy a decir que en caso de que tengamos un error, vamos a decir que'this'punto 'errorHttp' sea igual a'true', o sea, 'errorHttp'solamente va a dar un valor de'true'o solamente va a ser correcta en el caso de que tengamos un error. Voy a modificar, entonces, con este dato, voy a modificar la plantilla de mi aplicación. Por ahora no tiene ningún efecto gráfico ni ningún efecto de ningún tipo dentro de mi aplicación, pero si voy acá, a la plantilla de este componente, y buscamos en este caso'lista-de-libros. component . html', vemos que acá se está generando la lista, así que yo voy a crear acá un nuevo'div' donde voy a desplegar el error. Vamos a guardar, vamos a ver qué es lo que está pasando en este momento. Si, por ejemplo, yo ahora muestro la información, por ahora me va a mostrar este'div'de error, pero el'div'de error no importa que funcione o no funcione, siempre va a aparecer. Así que vamos a utilizar la directiva 'ngIf' para poder desplegar este error únicamente en caso de que, efectivamente, tengamos un error de'http'. Primero, yo le voy a asignar una clase que ya tengo predefinida en mis estilos y vamos a decir que esto sea de clase'alert alert-warning', en este caso estoy utilizando Bootstrap y esto le va a generar una apariencia gráfica a la alerta. Ahora, a nivel de lógica, vamos a poner acá un'ngIf' y lo vamos a utilizar a partir del valor de'error Http'. La directiva'ngIf'va a mostrar la información que se encuentra dentro de esta etiqueta únicamente en caso de que'errorHttp'nos dé un valor de'true'. Y sabemos que este caso se va a dar únicamente si no cargamos correctamente la información externa. Tenemos, entonces, nuestra aplicación ya funcionando y vemos que en caso de que no se pueda mostrar en lista, como tenemos acá en la información de Network, y que el archivo JSON no nos está cargando, nos va a decir "No se puede mostrar en lista". Y en caso contrario, si regreso acá y defino correctamente el archivo, que en este caso es 'archivo. json', revisamos y vemos que mi aplicación ya muestra la lista y no muestra la alerta, porque en este caso la variable'errorHttp' no fue igualada a'true'porque todo funcionó correctamente. Y, entonces, podemos ocultar este elemento que, de hecho, ni siquiera se va a mostrar en el'html'. Así es como podemos hacer un manejo básico de errores dentro de Angular a través de las conexiones de'http'. Te recomiendo ampliamente que siempre que realices algún tipo de conexión externa de datos implementes algún tipo de manejo de errores, porque es muy común que, por cualquier motivo, estos datos no logren cargar a nuestras aplicaciones.

Angular esencial

Aprende a crear aplicaciones con Angular y avanza poco a poco en su uso, empezando por la instalación, configuración y arquitectura hasta la publicación final de una aplicación.

4:27 horas (35 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:29/06/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.