Contenido del curso

Fundamentos Javascript

Funciones, Scope y Estructuras de Datos

Async/await como azúcar sintáctica en JavaScript

Resumen

El asincronismo en JavaScript se vuelve mucho más manejable cuando dejas atrás el callback hell y aprendes a encadenar promesas con then y catch, o mejor aún, a usar async y await. Esta guía te muestra, con ejemplos del flujo obtener usuario → obtener notas → procesar notas, cómo escribir código asíncrono claro, depurable y profesional.

¿Cómo se encadenan promesas sin caer en el callback hell?

Encadenar promesas no es un antipatrón. Al contrario, es la forma recomendada de orquestar varias tareas asíncronas que dependen unas de otras.

En el ejemplo trabajado en clase, la lógica reproduce tres pasos: obtener un usuario, obtener sus notas y procesarlas. La diferencia frente a los callbacks es que ahora cada paso devuelve una promesa, y tú la conectas con then.

¿Para qué sirve la función esperar dentro de una promesa?

La función esperar encapsula un setTimeout dentro de una promesa. Esto te permite simular una tarea que tarda (como una llamada a una API o la lectura de un archivo local) sin escribir el setTimeout repetido en cada función.

Gracias a ese encapsulamiento, obtenerUsuario, obtenerNotas y procesarNotas quedan con una sintaxis más limpia y legible.

¿Qué es el azúcar sintáctica en JavaScript? Es una forma de envolver una funcionalidad existente para que sea más fácil de leer y escribir por humanos. No agrega capacidades nuevas, solo mejora la legibilidad. async y await son azúcar sintáctica sobre las promesas.

¿Por qué siempre debes incluir un catch al final?

Una promesa tiene estados, y el estado rechazado indica que la operación falló. Si no agregas un catch, ese error se pierde silenciosamente.

La recomendación es clara: usa todos los then que necesites para encadenar pasos y cierra siempre con un catch al final para capturar cualquier rechazo en cualquier punto de la cadena.

¿Qué son async y await y cómo se usan?

async y await son dos palabras reservadas que transforman cómo escribes código asíncrono. Su efecto es hacer que el flujo asíncrono se lea casi como código síncrono, manteniendo la no bloqueabilidad por debajo.

La estructura básica es:

  • Antepones async a la palabra function para declarar que esa función es asíncrona.
  • Dentro del cuerpo, usas await antes de cualquier promesa para pausar la ejecución de esa función hasta que la promesa se resuelva.
  • La función async siempre devuelve una promesa, así que puedes retornar valores u objetos como en cualquier otra función.

En el ejemplo, las funciones obtenerUsuario, obtenerNotas y procesarNotas se marcan como async y dentro usan await esperar(200) para simular el retraso antes de retornar su resultado.

¿Cómo se manejan los errores con try y catch en funciones async?

Cuando trabajas con async/await, el manejo de errores se hace con try/catch, no con .catch() encadenado.

El patrón queda así dentro de una función async cargarDatos:

  • En el bloque try defines las constantes que dependen de cada paso: const usuario = await obtenerUsuario(), const notas = await obtenerNotas(usuario.id), const resultado = await procesarNotas(notas).
  • Imprimes el resultado, por ejemplo con console.log mostrando el nombre del usuario y el resultado procesado.
  • En el bloque catch capturas cualquier error que haya ocurrido en cualquiera de los await anteriores.

Si alguna de las promesas es rechazada o alguna función falla, el flujo cae directo al catch, sin importar en qué paso ocurrió el problema.

¿Cuándo usar async/await en lugar de then? Úsalo cuando tengas varios pasos asíncronos secuenciales que dependan entre sí. La lectura es lineal y los errores se centralizan en un solo catch.

¿Por qué async/await es la forma recomendada de trabajar el asincronismo?

La razón principal es la legibilidad. Tu cerebro lee de arriba hacia abajo, y async/await permite que el código asíncrono también se lea así.

Estas son las ventajas concretas frente a encadenar then:

  • Eliminas la indentación creciente y el ruido visual de múltiples .then().
  • Centralizas el manejo de errores en un solo bloque try/catch.
  • Depurar es más simple porque cada await es una línea con su propia variable.
  • El flujo se ve síncrono, aunque por debajo siga siendo no bloqueante.

La función sigue siendo asíncrona, sigue esperando tareas que pueden tardar (una API, un archivo, un timeout), y sigue permitiendo que otras tareas del programa avancen mientras tanto. Solo cambia cómo lo escribes y lo lees tú.

Ahora te toca practicar. Toma el ejemplo de obtener usuario, obtener notas y procesar notas, reescríbelo primero con then/catch y después con async/await/try/catch, y comparte tu solución en los comentarios para debatir cuál te resultó más clara y por qué.