Las funciones async junto a su palabra clave await son conocidas como azúcar sintáctico, pues convierten la sintaxis compleja de las promesas en una mucho más legible y sencilla. En este post, te enseñaremos cómo controlar errores con funciones async y await para reemplazar el método catch de las promesas en JavaScript.
Un poco de contexto
En nuestro post sobre transformar promesas con async y await, te hemos enseñado cómo pasar la sintaxis de promesas a la sintaxis simplificada (o azúcar sintáctico) de las funciones await. Allí te hemos enseñado cómo crear una sintaxis cuando las promesas salen bien, es decir, cuando se resuelven exitosamente y se manejan con el método then.
A continuación, te enseñaremos cómo transformar las promesas rechazadas y controlar errores con funciones async y await. Para ello, usaremos de ejemplo la siguiente función, manejada con una promesa:
getDataWithPromise ( ) {
const url = «https://urldeunapiejemplo.com»
return new Promise (function (resolve, reject) {
fetch (url)
.catch ((error) => {
reject («No he podido ir por los tweets»);
})
.then ((responseHttp) => {
console.log (responseHttp);
return responseHttp.json ( );
})
.catch ((error) => {
console.log (error);
reject («No he podido transformar la respuesta a json);
})
.then ((data) => {
resolve (data);
});
});
Como puedes ver, esta promesa se maneja con dos métodos then y dos métodos catch. Los métodos then los hemos transformado en las siguientes líneas de código con await:
async getDataWithAsync ( ) {
const url = «https://urldeunapiejemplo.com»
const response = await fetch (url)
const tweets = await response.json ( )
return tweets;
},
Ahora, el siguiente paso es transformar los métodos catch y aprender cómo controlar errores con funciones async y await.
¿Controlar errores con funciones async y await?
Para controlar errores con funciones async y await, deberemos usar la declaración try…catch. Como puedes leer en la página oficial de Mozilla Developer Network, esta declaración nos permite determinar un bloque de código a revisar y una acción o respuesta si sucede un error en dicho bloque. Esta declaración se escribe de la siguiente manera:
try {
} catch (error) {
}
Entonces, para transformar nuestro código original basta con insertar nuestra línea await, que reemplaza al primer método then, dentro de la sección try. Es decir, estaremos poniendo a prueba el código que hace la petición con fetch:
try {
const response = await fetch (url)
} catch (error) {
}
Luego, para controlar errores con funciones async y await, debemos determinar qué sucede en caso de error (dentro de la sección catch). En nuestro ejemplo, el primer método catch rechazaba la promesa con un string o mensaje:
.catch ((error) => {
console.log (error);
reject («No he podido ir a por los tweets»);
})
Para transformar eso a esta sintaxis, debemos lanzar un nuevo error que recibe como parámetro dicho mensaje. A continuación, te mostramos cómo insertamos esto dentro de nuestra declaración try…catch.
try {
const response = await fetch (url)
} catch (error) {
throw new Error (No he podido ir a por los tweets)
}
Ahora, como tenemos dos métodos then y dos métodos catch en el código original, deberemos crear otra declaración try…catch para controlar el segundo error posible, que sucede cuando los datos no pueden transformarse en JSON. Entonces, como en el caso anterior, insertamos nuestra frase await, que determina la conversión a JSON dentro de la sección try. Luego, en la sección catch lanzamos un nuevo error con el mensaje correspondiente:
try {
const tweets = await response.json ( );
} catch (error) {
throw new Error (No he podido transformar la respuesta a json)
}
Puede que el código anterior te genere errores, dependiendo del contexto de tu código. Recuerda que hay tres maneras de declarar variables en JavaScript: var, let y const. Mientras las últimas dos tienen un alcance o scope de bloque (las llaves que nos encontremos), var tiene un alcance de función (la función inmediatamente superior a donde se declare el var). Por ello, puede que debamos cambiar el código declarado con const a var para que funcione al alcance de toda la función.
Una vez que hemos logrado controlar errores con funciones async y await, podemos testar este manejo de nuestra función directamente desde el inspector de nuestro navegador. Para ello, basta con forzar un error en nuestro código y revisar en la consola del navegador si aparece nuestro error. Si tienes dudas sobre esta herramienta, puedes revisar nuestro post sobre cómo funciona el inspector web.
¿Cuál es el siguiente paso?
Ahora que sabes exactamente cómo controlar errores con funciones async y await, ¡te invitamos a probar este conocimiento en tus propios proyectos! Para seguir aprendiendo sobre el desarrollo de todo tipo de proyectos web, te recomendamos participar en nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva en el que aprenderás a escribir código con lenguajes como JavaScript, HTML, CSS y JSX. ¿A qué esperas para dar el siguiente paso en tu formación? ¡Inscríbete ya!
