Async/Await en JavaScript: manejo de promesas y código asíncrono

En el mundo del desarrollo web, la capacidad de manejar operaciones asíncronas es fundamental. JavaScript, como lenguaje de programación orientado a eventos, se enfrenta a la necesidad de realizar múltiples tareas sin bloquear el hilo principal. Aquí es donde entran en juego async y await, dos características que simplifican el trabajo con promesas y mejoran la legibilidad del código.

El uso de async/await permite a los desarrolladores escribir código asíncrono de una forma más parecida a la programación síncrona. Esto significa que, en lugar de encadenar múltiples promesas y utilizar callbacks, puedes escribir código que se vea más limpio y sea más fácil de seguir. En este artículo, exploraremos cómo funcionan async y await, y cómo puedes utilizarlos en tus proyectos.

Explicación

Las funciones async son funciones que devuelven una promesa. Al declarar una función como async, estás indicando que dentro de esa función se usarán operaciones asíncronas. La palabra clave await se utiliza dentro de esas funciones para esperar la resolución de una promesa antes de continuar con la ejecución del código.

Por ejemplo, si tienes una función que obtiene datos de una API, puedes usar await para pausar la ejecución hasta que los datos se hayan cargado. Esto evita el uso de callbacks y hace que el código sea más legible. Además, si una promesa se rechaza, puedes manejar el error utilizando try/catch, lo que proporciona un control de flujo más claro.

En resumen, async/await mejora la forma en que manejamos el código asíncrono, haciéndolo más fácil de escribir y entender. Al utilizar estas características, puedes optimizar tus aplicaciones y mejorar la experiencia del usuario final.

Ejemplos paso a paso

1. Ejemplo 1: Obtener datos de una API utilizando async/await.

   
   async function obtenerDatos() {
       const respuesta = await fetch('https://api.example.com/datos');
       const datos = await respuesta.json();
       console.log(datos);
   }
   obtenerDatos();
           

2. Ejemplo 2: Manejo de errores con try/catch.

   
   async function obtenerDatos() {
       try {
           const respuesta = await fetch('https://api.example.com/datos');
           if (!respuesta.ok) throw new Error('Error al obtener datos');
           const datos = await respuesta.json();
           console.log(datos);
       } catch (error) {
           console.error(error);
       }
   }
   obtenerDatos();
           

3. Ejemplo 3: Uso de múltiples await.

   
   async function obtenerDatosCompletos() {
       const usuario = await fetch('https://api.example.com/usuario');
       const posts = await fetch('https://api.example.com/posts');
       const datosUsuario = await usuario.json();
       const datosPosts = await posts.json();
       console.log(datosUsuario, datosPosts);
   }
   obtenerDatosCompletos();
           

Ejercicios básicos para practicar

1. Escribe una función asincrónica que obtenga información sobre un usuario desde una API y la imprima en la consola.
2. Crea una función que realice dos llamadas a distintas APIs y muestre los resultados juntos.
3. Modifica el ejercicio anterior para manejar errores adecuadamente utilizando try/catch.

Errores frecuentes

• No usar await: Asegúrate de usar await al llamar a funciones que devuelven promesas dentro de funciones async.
• Olvidar manejar errores: Siempre utiliza try/catch para capturar errores en tus funciones async.
• Usar await fuera de funciones async: Recuerda que await solo se puede usar dentro de funciones marcadas como async.

Preguntas frecuentes

¿Qué es una promesa en JavaScript?

Una promesa es un objeto que representa la eventual finalización o falla de una operación asíncrona.

¿Puedo usar async/await en todos los navegadores?

La mayoría de los navegadores modernos son compatibles con async/await, pero verifica la compatibilidad si necesitas soportar navegadores más antiguos.

¿Qué sucede si una promesa se rechaza?

Si una promesa se rechaza, puedes manejar el error usando un bloque try/catch dentro de la función async.