async y await
Una función async permite leer los pasos asíncronos en orden. await espera una promesa dentro de esa función; no congela la página ni detiene el resto de JavaScript.
Qué pausa await
Al llegar a await, la función cede el control al navegador. Otros eventos pueden ejecutarse. Cuando la promesa se cumple, la función continúa en el mismo punto.
async siempre devuelve una promesa
Aunque la función retorne una cadena, la llamada devuelve una promesa resuelta con ella. Si lanza un error, la promesa se rechaza.
Lee el resultado después de await
pour devuelve una promesa. serve escribe waiting, espera y después recibe lida tea.
function pour(order) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
if (order === "") reject("no leaves");
else resolve(order + " tea");
}, 100);
});
}
async function serve() {
console.log("waiting");
let drink = await pour("lida");
console.log(drink);
}
serve();
Las salidas son waiting y luego lida tea. Ambas están en serve, pero la segunda se ejecuta tras resolverse la promesa.
El llamador recibe una promesa
serve() sin await no entrega la bebida directamente.
async function serve() {
return "lida tea";
}
let ticket = serve();
console.log(ticket instanceof Promise);
La salida es true: ticket es una promesa. Su valor se lee con await en otra función async o con then.
Gestiona el rechazo con try y catch
Una promesa rechazada que se espera se comporta como un error lanzado en await. Coloca la operación dentro de try.
function pour(order) {
return order === ""
? Promise.reject("no leaves")
: Promise.resolve(order + " tea");
}
async function serveEmpty() {
try {
await pour("");
} catch (reason) {
console.log(reason);
}
}
serveEmpty();
La salida es no leaves. Los demás errores del mismo bloque try también llegan a ese catch.
El resto de la página continúa
Solo se pausa la función async actual. La llamada devuelve una promesa de inmediato y el código síncrono posterior puede seguir.
Ejemplo completo en el navegador
El ejemplo registra las etapas en una función async. Un temporizador resuelve la promesa para que funcione sin servidor.
<!DOCTYPE html>
<html>
<body>
<p id="cup">blank</p>
<p id="line">…</p>
<script>
function pour(order) {
return new Promise(resolve => setTimeout(() => resolve(order + " tea"), 100));
}
async function serve() {
const cup = document.getElementById("cup");
const seen = ["waiting"];
cup.textContent = "waiting";
const drink = await pour("lida");
cup.textContent = drink;
seen.push(drink, "done");
document.getElementById("line").textContent = seen.join(" / ");
}
serve();
</script>
</body>
</html>
La línea final es waiting / lida tea / done. done se añade después de escribir el valor esperado.
Pruébalo
Cambia lida y espera el resultado. Después pasa una cadena vacía y comprueba que catch recibe no leaves.
Errores frecuentes
No esperes una cadena lista de una llamada async. No uses await en una función normal ni supongas que detiene toda la página.
Recuerda
async siempre devuelve una promesa. await pausa solo esa función hasta que la promesa termina. Usa try/catch ante posibles rechazos.
🧠 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