Asynchrone Iteratoren – for await...of und asynchrone Generatoren
Asynchrone Generatoren und for await...of verwenden, um über die Zeit eintreffende Werte zu verarbeiten. Symbol.asyncIterator und einfache asynchrone Pipelines kennenlernen
Asynchrone Iteratoren – for await...of und asynchrone Generatoren ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 3 Lektionen.
Warum asynchrone Iteration?
Ziel: Verarbeiten Sie Werte, die möglicherweise erst später eintreffen.
- for await...of durchläuft asynchrone Iterables
- async function* erstellt asynchrone Generatoren
- Symbol.asyncIterator kennzeichnet ein Objekt als asynchron iterierbar
- Kleines asynchrones Map-Beispiel
async function* und for await...of
Ein asynchroner Generator (async function*) liefert Werte, die von for await...of verarbeitet werden.
// 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);
}
})();
Manuelles asynchrones next()
next() eines asynchronen Iterators gibt ein Promise zurück, das zu { value, done } aufgelöst wird.
// 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 bei Objekten
Fügen Sie [Symbol.asyncIterator]() hinzu, das einen asynchronen Iterator zurückgibt. So funktioniert ein Objekt mit 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);
}
})();
Asynchrone Map-Pipeline
Setzen Sie asynchrone Generatoren zusammen, um kleine Pipelines aufzubauen, die jeden Schritt abwarten.
// 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);
})();
Gute Gewohnheiten
Tipps:
- for await...of benötigt ein asynchron iterierbares Objekt (Symbol.asyncIterator).
- Verwenden Sie async function*, um asynchrone Generatoren einfach zu definieren.
- Auf jedes next() wird gewartet. Halten Sie die einzelnen Arbeitsschritte klein, damit die Anwendung reaktionsfähig bleibt.
Quiz zu den Grundlagen asynchroner Iterables
Schnelltest: Voraussetzung für ein asynchrones Iterable.
Zusammenfassung
Zusammenfassung: Verwenden Sie async function* und yield, um asynchrone Generatoren zu erstellen. Durchlaufen Sie sie mit for await...of oder warten Sie manuell auf next(). Bauen Sie mit Hilfsgeneratoren kleine asynchrone Pipelines auf.
Häufig gestellte Fragen
Ist die Lektion „Asynchrone Iteratoren – for await...of und asynchrone Generatoren“ kostenlos?
Ja — der vollständige Text von „Asynchrone Iteratoren – for await...of und asynchrone Generatoren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 3 Lektionen.
Was lerne ich in „Asynchrone Iteratoren – for await...of und asynchrone Generatoren“?
Asynchrone Generatoren und for await...of verwenden, um über die Zeit eintreffende Werte zu verarbeiten. Symbol.asyncIterator und einfache asynchrone Pipelines kennenlernen Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um JavaScript Academy zu starten?
Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 3.
Wie lange dauert die Lektion „Asynchrone Iteratoren – for await...of und asynchrone Generatoren“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?
Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Iterable-Protokoll und for...of
- Generatorfunktionen, yield und kleine Pipelines
- Asynchrone Iteratoren – for await...of und asynchrone Generatoren