Iteratory asynchroniczne — for await...of i generatory async
Używanie generatorów async i for await...of do odbierania wartości pojawiających się w czasie. Poznanie Symbol.asyncIterator i prostych potoków asynchronicznych
Iteratory asynchroniczne — for await...of i generatory async to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 3 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 3 lekcji w sumie.
Dlaczego iteracja asynchroniczna?
Cel: Pobierać wartości, które mogą pojawić się dopiero później.
- Pętle for await...of przechodzą po asynchronicznie iterowalnych obiektach
- async function* tworzy generatory asynchroniczne
- Symbol.asyncIterator oznacza obiekt jako asynchronicznie iterowalny
- Mały przykład asynchronicznego mapowania
async function* i for await...of
Generator asynchroniczny (async function*) generuje wartości pobierane przez for await...of.
// 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);
}
})();
Ręczne użycie asynchronicznego next()
next() wywołane na asynchronicznym iteratorze zwraca promise, który rozwiązuje się do wartości { 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 w obiektach
Dodaj [Symbol.asyncIterator](), która zwraca asynchroniczny iterator, aby obiekt współpracował z 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);
}
})();
Asynchroniczny potok mapowania
Łącz generatory asynchroniczne, aby budować niewielkie potoki oczekujące na każdy etap.
// 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);
})();
Dobre praktyki
Wskazówki:
- for await...of wymaga obiektu asynchronicznie iterowalnego (Symbol.asyncIterator).
- Używaj async function*, aby łatwo definiować generatory asynchroniczne.
- Każde next() jest oczekiwane; zadania powinny być krótkie, aby aplikacja pozostała responsywna.
Quiz: podstawy asynchronicznej iterowalności
Szybkie sprawdzenie: Wymaganie dotyczące asynchronicznie iterowalnych obiektów.
Podsumowanie
Podsumowanie: Używaj async function* i yield do tworzenia generatorów asynchronicznych. Iteruj za pomocą for await...of albo ręcznie oczekuj na next(). Buduj niewielkie asynchroniczne potoki z pomocniczymi generatorami.
Często zadawane pytania
Czy lekcja „Iteratory asynchroniczne — for await...of i generatory async” jest bezpłatna?
Tak — pełny tekst „Iteratory asynchroniczne — for await...of i generatory async” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 3 lekcji w sumie.
Co nauczysz się w „Iteratory asynchroniczne — for await...of i generatory async”?
Używanie generatorów async i for await...of do odbierania wartości pojawiających się w czasie. Poznanie Symbol.asyncIterator i prostych potoków asynchronicznych Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?
Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 3.
Ile czasu zajmuje lekcja „Iteratory asynchroniczne — for await...of i generatory async”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?
Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Protokół iterowalności i for...of
- Funkcje generatorów, yield i małe potoki
- Iteratory asynchroniczne — for await...of i generatory async