CodeForge

JavaScript de Cero a Experto / Asincronía II

async/await: promesas con ropa de código normal

Teoría20 min20 XP

Tus cadenas de .then funcionan, pero la industria escribe asincronía con otra ropa: async/await — la sintaxis que hace que el código asíncrono se LEA como código normal, línea por línea. No es un mecanismo nuevo: son tus promesas del módulo 9 con mejor caligrafía. Por eso te va a parecer fácil.

El marcapáginas

Compara con la cadena equivalente del módulo 9: mismo comportamiento, misma espera, mismo orden — pero ahora los resultados viven en variables normales (const titular = await ...) y el flujo se lee de corrido, sin un solo .then. El último console.log demuestra el marcapáginas: al primer await, consultar se suspendió y el script siguió.

Las tres reglas del juego

1. await solo vive dentro de funciones async. La palabra async al declarar la función es lo que habilita los marcapáginas adentro. (Nota honesta: en módulos modernos de JavaScript también existe await en el nivel superior del archivo, fuera de toda función — lo verás por ahí; la regla del 99% sigue siendo "await dentro de async".)

2. Una función async SIEMPRE devuelve una promesa. Aunque retornes un número, quien la llama recibe una promesa que se cumple con ese número. Por eso pudiste hacer consultar("julio").then(...) en el reto pasado y por eso aquí podrías hacer const total = await consultar() desde otra función async. Async por dentro, promesa por fuera: todo conecta.

3. await desempaca promesas. cargarTitular() devuelve una promesa; await cargarTitular() te entrega el VALOR con el que se cumplió. Si le haces await a algo que no es promesa, te lo devuelve tal cual — inofensivo.

equivalencia.js
// estas dos funciones son EXACTAMENTE el mismo mecanismo:
cargarTitular()
.then((titular) => cargarGastos(titular))
.then((gastos) => console.log(gastos.length));

async function version2() {
const titular = await cargarTitular();
const gastos = await cargarGastos(titular);
console.log(gastos.length);
}

Por eso el módulo 9 no fue tiempo perdido: async/await es azúcar sintáctico sobre promesas. Cuando algo raro pase (¿por qué este await no espera? ¿por qué este log salió antes?), la respuesta SIEMPRE está en el modelo de abajo: promesas, microtareas, event loop.

Dentro de una función async escribes: const gastos = cargarGastos(); console.log(gastos.length); — y length es undefined. cargarGastos devuelve una promesa de un array. ¿Qué faltó?

Mini-reto

Traduce tu reto del módulo 9 a la sintaxis nueva: reescribe consultar de "Mi Bolsillo en la nube" con async/await — titular en una variable, gastos en otra, total con reduce e impresión con tu Intl. Deja por fuera el manejo del mes inválido (junio): al intentarlo verás que te falta una pieza — ¿dónde está el catch en este mundo? Esa es exactamente la próxima lección.

Qué sigue

En las cadenas, .catch recogía cualquier tropiezo. Con async/await el manejo de errores usa una herramienta que parece de otro tema — try y catch — y resulta ser más natural todavía: la misma que usarás para TODOS los errores de JavaScript. Próxima lección: que los fallos asíncronos no te tomen por sorpresa.