Promises
La taza es un párrafo, #cup. Empieza como blank, y el script la pone en waiting antes de pedir té.
pour no devuelve la bebida. Devuelve una promesa. Con then le pides que escriba la bebida más tarde. La línea bajo pour sigue diciendo waiting. La línea queda waiting / lida tea.
No es la taza de hace un momento
La página anterior pasó done a serve. serve llamó a la función antes de volver, así que el registro de debajo ya era lida tea / poured. Allí nada esperó.
Aquí la función que das a then no corre en la línea siguiente. pour vuelve primero. La bebida aparece cuando este script ya terminó.
Tres estados
Una promesa está pending hasta que se resuelve. resolve la cumple con un valor. reject la rechaza con una razón. then corre solo si se cumple. catch corre solo si se rechaza. Esta página no tiene temporizador. El ejecutor llama a resolve o a reject al instante, y los manejadores esperan a que el script termine.
📊 Tres estados
| Estado | Qué ves | Fácil de confundir |
|---|---|---|
| pending | la taza aún dice waiting | la bebida ya está en la taza |
| fulfilled | then recibe lida tea | que catch también corra |
| rejected | catch recibe no leaves | que then reciba la bebida |
El ejecutor es ahora, el manejador no
La función que das a new Promise corre al instante. Por eso resolve("lida tea") puede ocurrir antes de que pour vuelva. La función de then es distinta. Queda en cola. La línea después de pour(...) corre mientras la taza dice waiting.
La línea siguiente sigue esperando
pour("lida") guarda una promesa en order. La taza se puso en waiting. El registro es esa palabra, no la bebida.
function pour(order) {
return new Promise(function (resolve, reject) {
if (order === "") {
reject("no leaves");
return;
}
resolve(order + " tea");
});
}
let cup = document.getElementById("cup");
cup.textContent = "waiting";
let order = pour("lida");
console.log(cup.textContent);
El registro es waiting. order es la promesa. No es el texto lida tea.
then recibe la bebida
Llama a then con una función. Esa función recibe el valor pasado a resolve. Escribe la bebida y lo registra. Este registro no es el de la línea siguiente. Es el de dentro de then.
function pour(order) {
return new Promise(function (resolve, reject) {
if (order === "") {
reject("no leaves");
return;
}
resolve(order + " tea");
});
}
let cup = document.getElementById("cup");
pour("lida").then(function (drink) {
cup.textContent = drink;
console.log(cup.textContent);
});
El registro es lida tea. Un texto vacío no llega a este manejador.
No hay hojas
pour("") llama a reject("no leaves") y vuelve. catch recibe esa razón. then no corre.
function pour(order) {
return new Promise(function (resolve, reject) {
if (order === "") {
reject("no leaves");
return;
}
resolve(order + " tea");
});
}
pour("").catch(function (reason) {
console.log(reason);
});
El registro es no leaves.
La promesa no es la bebida
order.then es una función. Así sabes que order es una promesa y no el texto que querías. Comparar la promesa con "lida tea" sería falso, y este fragmento solo imprime el tipo de then.
function pour(order) {
return new Promise(function (resolve, reject) {
if (order === "") {
reject("no leaves");
return;
}
resolve(order + " tea");
});
}
let order = pour("lida");
console.log(typeof order.then);
El registro es function.
La línea bajo la taza
El script pone la taza en waiting y empuja esa palabra al instante. then empuja lida tea y une las dos palabras. La unión está dentro de then, así que ocurre después del script, no en la línea siguiente.
<!DOCTYPE html>
<html>
<head>
<title>promised-cup — page</title>
</head>
<body>
<p id="cup">blank</p>
<p id="line">…</p>
<script>
function pour(order) {
return new Promise(function (resolve, reject) {
if (order === "") {
reject("no leaves");
return;
}
resolve(order + " tea");
});
}
let cup = document.getElementById("cup");
let seen = [];
cup.textContent = "waiting";
seen.push(cup.textContent);
pour("lida").then(function (drink) {
seen.push(drink);
cup.textContent = drink;
document.getElementById("line").textContent = seen.join(" / ");
});
</script>
</body>
</html>
La línea es waiting / lida tea. Waiting fue inmediato. lida tea llegó en then. La palabra blank ya no está. lida tea / poured es la página anterior.
En el mostrador
- Pon la taza en waiting, llama a
pour("lida")y registra la taza al instante. El registro es waiting. - Pon la bebida en la taza dentro de
then. Ese registro es lida tea. - Llama a
pour("")y atrapa la razón concatch. El registro es no leaves. - Lee
typeof order.then. El registro es function. - Lee la línea de la página: waiting / lida tea.
Fallos en el mostrador
La taza dice waiting hasta que corre then. No dice poured.
- Esperar que el registro bajo
poursea lida tea - Tomar el valor devuelto por el texto de la bebida
- Usar
thencon un pedido vacío y perderte no leaves - Usar
catchcon lida y esperar no leaves - Leer la línea como lida tea / poured
Quédate con esto
pourdevuelve una promesa, no el texto lida tea- La línea siguiente sigue registrando waiting
thenrecibe lida tea después de este script- Un pedido vacío se rechaza con no leaves, y
catchlo registra - La línea de la página es waiting / lida tea
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior