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);
}

 

Deja un comentario

*