Qué es async/await y cómo usarlo correctamente

Async/await es una de las características más poderosas de Javascript que entró en la especificación de EcmaScript2017. A lo largo de esta lección te explicaré cómo usarla y qué problemas podemos encontrarnos.

Y si eres de los que prefieren vídeos, te dejo la colaboración que he hecho con Garage de ideas para que no te pierdas nada:

Promesas

Antes de meternos en harina con async-await, tenemos que entender los conceptos básicos de las promesas en JavaScript. Las promesas son una forma de manejar tareas asíncronas y, junto con async-await, nos permiten escribir un código más claro y legible.

¿Que no sabes lo que es una promesa?

Muy sencillo: una promesa es un objeto que representa el resultado de una operación asíncrona y se suele usar en tareas que toman cierto tiempo de procesamiento (por ejemplo, acceder a una API o leer un archivo) de manera ordenada y estructurada.

Es decir, creamos una promesa que tiene la lógica de la operación asíncrona y luego podemos encadenar métodos como then() o catch() para manejar la promesa en función de su estado, que puede ser pendiente, cumplida (then) o rechazada (catch). Así, entre otras cosas, evitamos anidar callbacks continuamente.

Las promesas han sido adoptadas en Javascript ampliamente y son la base de async-await.

¡Veamos cómo trabajar con ello!

Sintaxis de async/await

La sintaxis es muy sencilla. Usamos la palabra “async” antes de una función para decir que es asíncrona y la palabra “await”, que pausa la ejecución de la función a la espera de que se obtengan todos los datos y siempre debe estar dentro de la función async.

async function fetchData() {
    try {
        const response = await fetch("https://randomuser.me/api");
        const data = await response.json();
        console.log(data);
        document.getElementById("contenido").innerHTML = `
            <img src="${data.results[0].picture.large}" width="200px"/>
            <p>Nombre: ${data.results[0].name.first} ${data.results[0].name.last}
            `;
    }

    catch (error) {
        console.log("Error: " + error);
    }
}
fetchData();

En este ejemplo, podemos ver varias cosas:

• La función que hemos llamado fetchData es asíncrona (por eso ponemos delante async), por lo que no bloquea la ejecución de otras tareas mientras espera a que se resuelva la promesa. Es decir, podríamos realizar otras tareas mientras se termina de ejecutar la función.
• Luego usamos await a la espera de que la llamada a la API se resuelva y nos devuelva los datos en formato JSON.
• Y además, hemos añadido un bloque catch que nos sirve para capturar errores en caso de que se produzcan.

Problemas en el uso de async/await

Como te comentaba al principio, es habitual que el uso de async/await de lugar a despistes o errores más comunes de lo que crees. Aquí tienes algunos de ellos:

1. El primer problema que podemos encontrar es el olvido de marcar una función como “async” al usar “await” dentro de ella. Esto puede conducir a errores difíciles de depurar, ya que el código puede parecer correcto, pero no se comportará como esperamos.
2. Otro problema que puede surgir es la falta de manejo adecuado de errores al utilizar async-await. Si no envolvemos nuestras operaciones asincrónicas en bloques “try-catch”, es posible que los errores pasen desapercibidos y no se manejen correctamente.
3. Además, debemos tener en cuenta que el uso excesivo de async-await puede llevar a un código poco eficiente. Si tenemos múltiples operaciones asincrónicas y las esperamos una tras otra con await, estaremos bloqueando la ejecución de otras tareas y perdiendo el beneficio de la programación asíncrona.
4. Debemos recordar que async-await solo funciona dentro de funciones marcadas como “async”. Si intentamos utilizar await fuera de una función asíncrona, nos encontraremos con errores de sintaxis.

¿Te ha quedado claro el uso de async/await? ¡Espero que sí! Y si tienes dudas o quieres comentar cualquier cosa al respecto, deja tu comentario 😉