JavaScript de Cero a Experto / Asincronía II
async/await: promesas con ropa de código normal
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.
// 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.