JS – Manejo de errores con Async/Await
Publicado por Iván Gajate el 21 de noviembre de 2020 en Desarrollo Web, JavaScript
Las promesas me encantan. Hacen muy fáciles las llamadas asíncronas en JavaScript. Aunque a veces su sintaxis es un poco engorrosa.
cargarDatos() { obtenerListadoUsuarios() .then(mostrarResultado) .catch(haHabidoUnError); }
Utilizando la sintáxis Async/Await podemos simplificar su uso.
async cargarDatos() { const usuarios = await obtenerListadoUsuarios(); // Si la consulta falla no llega a esta línea :( mostrarResultado(usuarios); }
Mucho más fácil de leer y mantener :D.
El problema es, que cuando el método falla, la línea de la consulta dará un error de JavaScript y el resto de nuestro código dejará de funcionar.
Mal asunto 🙁
Se suele utilizar el Try/Catch para controlar el error, pero… en mi opinión eso es como seguir usando el Then/Catch pero con otro nombre!!!
Realmente await devuelve una Promesa, por lo que se le puede concatenar un catch al final. En ese catch podemos controlar el error y devolver un valor por defecto.
Si falla la consulta devuelvo undefined. De esta forma, el valor de usuarios es, o el resultado de la consulta, o undefined.
En cualquier caso el código continuará y posteriormente puedo controlar y gestionar si el resultado ha sido el esperado o undefined.
Un error controlado.
async cargarDatos() { const usuarios = await obtenerListadoUsuarios().catch(() => undefined); // La consulta devolverá el resultado o undefined if (usuarios) { mostrarResultado(usuarios); } }
O bien si se espera un Array con valores, se puede devolver un Array vacío en caso de error y continuar el flujo.
async cargarDatos() { const usuarios = await obtenerListadoUsuarios().catch(() => []); // La consulta devolverá el resultado o [], pero no fallará mostrarResultados(usuarios); }