Iteradores asíncronos: for await...of y generadores async
Use generadores async y for await...of para consumir valores que llegan con el tiempo. Aprenda Symbol.asyncIterator y pipelines asíncronos sencillos.
Iteradores asíncronos: for await...of y generadores async es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 3 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 3 lecciones en total.
¿Por qué iterar de forma asíncrona?
Objetivo: Consuma valores que pueden llegar más tarde.
- for await...of recorre iterables asíncronos
- async function* crea generadores asíncronos
- Symbol.asyncIterator marca un objeto como iterable asíncrono
- Pequeño ejemplo de map asíncrono
async function* y for await...of
Un generador asíncrono (async function*) produce valores que for await...of consume.
// Use an async generator to yield values (could be delayed in real apps)
(async function () {
async function* countAsync(n) {
for (let i = 1; i <= n; i = i + 1) {
// In real code you could await a delay or I/O here
yield i;
}
}
for await (const x of countAsync(3)) {
console.log("async value:", x);
}
})();
next() asíncrono manual
En un iterador asíncrono, next() devuelve una promesa que se resuelve en { value, done }.
// Drive an async iterator manually with await it.next()
(async function () {
async function* two() {
yield "A";
yield "B";
}
const it = two();
console.log(await it.next()); // { value: "A", done: false }
console.log(await it.next()); // { value: "B", done: false }
console.log(await it.next()); // { value: undefined, done: true }
})();
Symbol.asyncIterator en objetos
Añada [Symbol.asyncIterator]() que devuelva un iterador asíncrono para hacer que un objeto funcione con for await...of.
// Mark a plain object as async-iterable via Symbol.asyncIterator
(async function () {
const AsyncTwice = {
from: function (a, b) {
return {
a: a, b: b,
[Symbol.asyncIterator]: async function () {
let step = 0;
return {
next: async function () {
if (step === 0) { step = 1; return { value: a, done: false }; }
if (step === 1) { step = 2; return { value: b, done: false }; }
return { value: undefined, done: true };
}
};
}
};
}
};
for await (const v of AsyncTwice.from("X", "Y")) {
console.log("from object:", v);
}
})();
Canalización map asíncrona
Combine generadores asíncronos para crear pequeñas canalizaciones que hacen await en cada paso.
// Async map: transform values lazily while awaiting work
(async function () {
async function* countAsync(n) {
for (let i = 1; i <= n; i = i + 1) {
yield i;
}
}
async function* asyncMap(iterable, fn) {
for await (const v of iterable) {
// fn can be async; await its result
const out = await fn(v);
yield out;
}
}
const doubled = asyncMap(countAsync(4), async function (x) {
// simulate async transform (no real delay for demo)
return x * 2;
});
const collected = [];
for await (const v of doubled) {
collected.push(v);
}
console.log("doubled async:", collected);
})();
Buenos hábitos
Consejos:
- for await...of necesita un iterable asíncrono (Symbol.asyncIterator).
- Use async function* para definir fácilmente generadores asíncronos.
- Espere cada next(); mantenga el trabajo pequeño para conservar la capacidad de respuesta.
Cuestionario sobre los conceptos básicos de los iterables asíncronos
Comprobación rápida: requisito de los iterables asíncronos.
Resumen
Resumen: Use async function* y yield para crear generadores asíncronos. Realice el bucle con for await...of o espere next() manualmente. Cree pequeñas canalizaciones asíncronas con generadores auxiliares.
Preguntas frecuentes
¿La lección «Iteradores asíncronos: for await...of y generadores async» es gratis?
Sí — el texto completo de «Iteradores asíncronos: for await...of y generadores async» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 3 lecciones en total.
¿Qué aprenderé en «Iteradores asíncronos: for await...of y generadores async»?
Use generadores async y for await...of para consumir valores que llegan con el tiempo. Aprenda Symbol.asyncIterator y pipelines asíncronos sencillos. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar JavaScript Academy?
No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 3.
¿Cuánto tiempo toma la lección «Iteradores asíncronos: for await...of y generadores async»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?
Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Protocolo iterable y for...of
- Funciones generadoras, yield y pequeños pipelines
- Iteradores asíncronos: for await...of y generadores async