CodeForge

JavaScript de Cero a Experto / Asincronía I

Promesas I: consumirlas con then, catch y finally

Teoría20 min20 XP

La promesa es la estructura que JavaScript incorporó para domar la asincronía: un OBJETO que representa "un valor que va a llegar". La recibirás de fetch, de librerías, de APIs del navegador — por eso hoy aprendes primero a consumirlas: entender sus estados y reaccionar con then, catch y finally.

El localizador de la plazoleta

then, catch, finally en acción

Para practicar sin servidores, un simulador: pedirComida devuelve una promesa que tarda 1.5 segundos y a veces falla (cómo se fabrica por dentro es la próxima lección — hoy eres el cliente):

Corre el playground varias veces hasta ver los dos destinos. Observa el patrón de lectura, que ya es una frase: "pide la comida; CUANDO llegue, celebra; SI falla, plan B; y pase lo que pase, devuelve el aparato". Sin pirámide, sin callbacks de error por nivel: cada preocupación tiene su bloque.

Los detalles que te harán ver profesional

El error es un objeto Error. Las promesas bien hechas rechazan con new Error("motivo") — y tu .catch recibe ese objeto: el texto vive en error.message. Imprimir error a secas también funciona (trae hasta la pista de dónde nació), pero para mostrar el motivo, .message.

.finally es tu gancho de limpieza. Ocultar el "cargando...", reactivar el botón, cerrar la conexión: cosas que deben pasar con éxito O fracaso. Sin finally las duplicarías en then y en catch — y algún día olvidarías una copia.

Una promesa resuelta no se "gasta". Puedes colgarle un .then a una promesa que se cumplió hace rato: tu reacción se ejecuta igual (como microtarea, la bandeja VIP de la lección 2). El localizador recuerda su resultado para siempre.

Tu .then muestra los datos y tu .catch muestra el error, y en AMBOS casos debes ocultar el aviso de 'cargando...'. ¿Dónde va esa línea?

Mini-reto

En "Mi Bolsillo": consume pedirComida renombrada mentalmente como consultarSaldo("Sara") — cámbiale los textos al simulador para que cumpla con un saldo (un número) o rechace con "titular no encontrado". Tu cadena: .then que formatee el saldo con Intl es-CO, .catch que muestre el error.message, .finally con "— consulta cerrada —". Corre hasta ver ambos caminos y confirma que finally salió SIEMPRE.

Qué sigue

Ya consumes promesas como cliente. Hora de pasar a la cocina: fabricar las tuyas con new Promise, convertir el viejo setTimeout en una promesa reutilizable (esperar(ms) — la función que usarás mil veces) y entender qué son de verdad resolve y reject.