El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

JavaScript esencial

Cómo maneja JavaScript los errores

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Aprende cómo manejar los errores que se lleguen a presentar cuando estás con sumiendo datos de fuentes locales o externas. Conoce las técnicas necesarias para poder identificar el momento en el que tu aplicación pueda estar detonando algún tipo de error.
03:54

Transcripción

"No todo es miel sobre hojuelas". Muchas veces nos vamos a enfrentar a errores y errores que no van a depender de nosotros. Por ejemplo, ¿qué sucede si los servicios que estamos consumiendo no están disponibles o los datos en algún momento se malformaron y no llegó bien la información? ¿O simplemente no tenemos acceso a Internet y, por tanto, no podemos consumir datos? Bueno, también es muy importante que podamos manejar los errores y reaccionar ante ellos. Para esto vamos a trabajar con este ejemplo. Aquí, en el HTML de este ejercicio, tenemos una división con un ID llamado'mensajes'. Lo que haremos es que cuando detectamos que hay un error vamos a enviar toda la información directamente a esta división. Esta división también tiene una clase'hide' que hace que esta esté oculta inmediatamente que carga la página. Esto se va a provocar porque tenemos una regla de'mensajes'donde aparece todo con un color, con una forma, etc. Por ejemplo, ¿qué sucede si yo quito'hide'y actualizo mi página? Vemos que tenemos aquí esta zona de mensajes. La idea es que esa zona de mensajes solamente aparezca cuando se necesite, así que vamos a solucionarlo. Vamos al archivo'app. js' y aquí, después de que tenemos nuestras peticiones, vamos a trabajar con un método llamado'catch'. Este método llamado'catch', como su nombre en inglés lo dice, va a atrapar todos los errores que sucedan. Y aquí lo que vamos a hacer es que vamos a capturar la información primero a través de un error. Así que podemos mandar aquí'error' y vamos a trabajar con un "arrow function" y dentro de este "arrow function" vamos a escribir un par de llaves para todo lo que tenemos que hacer. Lo primero que vamos a hacer es mostrar ese pedazo de mensaje y para esto vamos a utilizar el método'classList . toggle'para que podamos "remover" la clase. Este'toggle' es un método del DOM que lo que va a hacer es simplemente "remover" o agregar la clase según se necesite. La lógica de este agregado o de "remover" esta clase ya está dentro de este método. Y, como puedes ver, acá nosotros tenemos la asignación del HTML a una variable de JavaScript. Ahora, entonces, vamos a mandar el mensaje de error para que se muestre en esa parte de mensajes. Entonces, para eso vamos a utilizar 'innerHTML'y vamos a mandar el error que estamos recibiendo como parámetro y, posterior a eso, vamos a ocultarlo. Pero para ocultarlo vamos a usar un truco, ¿recuerdas el'setTimeout, que después de un cierto tiempo ejecuta una acción? Bueno, pues ahora vamos a utilizarlo. ¿Para qué? Simplemente para que vuelva a aplicar la clase'hide' a'mensajes', y así, después de tres segundos que nosotros estamos estableciendo, el mensaje desaparezca. Vamos a hacer la prueba primero, actualizo mi navegador y pulso el botón Traer datos. Aquí todo funciona correctamente, pero vamos a provocar un error. ¿Qué tal si yo escribo mal la URL? Voy a agregar una eme extra para provocar este error, guardo y actualizo el navegador. Pulsamos el botón Traer datos y vemos como en este momento se genera un error y rápidamente apareció ese mensaje. ¡Ups!, se fue inmediatamente. Vamos a darle un poco más de tiempo, vamos a darle 6 segundos. Actualizo el navegador y pulsamos el botón Traer datos nuevamente. Como vemos, aquí nos dice que tiene un error que dice: "Fail to fetch". Esto significa que hay un error y no pudo traerse la información necesaria. No te preocupes, a ti en la consola te va a quedar un poquito más de detalle del error y podrás saber qué es lo que sucede. Una vez que el error es corregido, actualizamos el navegador y así podemos traernos nuevamente la información. Así, ahora ya puedes reaccionar cuando algo no salga conforme a lo esperado.

JavaScript esencial

Aprende y conoce JavaScript empezando por entender sus conceptos más básicos y esenciales, pero considerando en todo momento la nueva especificación del lenguaje ES6.

5:26 horas (90 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:12/09/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.