Promesas y async/await: de la teoría al código

En el mundo del desarrollo frontend, es común encontrarnos con situaciones en las que necesitamos realizar operaciones asíncronas, como cargar datos desde un servidor o esperar a que el usuario realice una acción específica. Para gestionar estas situaciones, JavaScript nos proporciona las promesas y, más recientemente, la sintaxis async/await.

¿Qué son las promesas?

Una promesa en JavaScript es un objeto que representa la eventual completitud o el fracaso de una operación asíncrona y su resultado. Las promesas son útiles para gestionar código asíncrono de manera más limpia y fácil de leer que las callbacks tradicionales.

Una promesa puede tener tres estados: pendiente, cumplida o rechazada. Cuando creamos una promesa, inicialmente está en estado pendiente. Si la operación asíncrona se completa con éxito, la promesa se cumple y podemos acceder al resultado. Si ocurre un error, la promesa se rechaza y podemos manejar el error.

¿Cómo se utilizan las promesas?

Las promesas se crean utilizando el constructor Promise. Una promesa toma una función como argumento, que a su vez recibe dos parámetros: resolve y reject. resolve se llama cuando la operación asíncrona se completa con éxito, mientras que reject se llama si ocurre un error.

const miPromesa = new Promise((resolve, reject) => {
         // Simulamos una operación asíncrona con setTimeout
         setTimeout(() => {
            // Si todo va bien, resolvemos la promesa con el resultado
            resolve('¡Todo listo!');
         }, 2000);
      });

      miPromesa.then((mensaje) => {
         console.log(mensaje); // Imprime: ¡Todo listo!
      }).catch((error) => {
         console.error('Hubo un error:', error);
      });

Introducción a async/await

La sintaxis async/await es azúcar sintáctico sobre las promesas. Nos permite escribir código asíncrono que se lee y se escribe de manera síncrona, lo que puede mejorar significativamente la legibilidad del código.

Para usar async/await, debemos declarar una función como asíncrona con la palabra clave async. Dentro de esta función, podemos usar la palabra clave await para pausar la ejecución de la función hasta que la promesa se cumpla o se rechace.

async function main() {
         try {
            const respuesta = await fetch('https://api.example.com/datos');
            const datos = await respuesta.json();
            console.log(datos);
         } catch (error) {
            console.error('Error al cargar datos:', error);
         }
      }

      main();

Conclusión

En resumen, las promesas y async/await son herramientas poderosas en JavaScript que nos permiten gestionar el código asíncrono de manera efectiva. Al entender cómo funcionan y cómo se utilizan, podemos mejorar la legibilidad y la mantenibilidad de nuestro código, lo que a su vez puede conducir a aplicaciones más robustas y escalables.