Iterator Async — for await...of dan Generator Async
Gunakan generator async dan for await...of untuk mengonsumsi nilai yang tiba seiring waktu. Pelajari Symbol.asyncIterator dan alur async sederhana
Iterator Async — for await...of dan Generator Async adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 3 pelajaran total.
Mengapa iterasi asinkron?
Tujuan: Konsumsi nilai yang mungkin tersedia kemudian.
- for await...of melakukan perulangan pada objek yang dapat diiterasi secara asinkron
- async function* membuat generator asinkron
- Symbol.asyncIterator menandai objek sebagai objek yang dapat diiterasi secara asinkron
- Contoh map asinkron sederhana
async function* dan for await...of
Generator asinkron (async function*) menghasilkan nilai yang dikonsumsi oleh 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);
}
})();
next() asinkron secara manual
next() pada pengiterasi asinkron mengembalikan janji yang diselesaikan menjadi { 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 pada objek
Tambahkan [Symbol.asyncIterator]() yang mengembalikan pengiterasi asinkron agar objek dapat digunakan dengan 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);
}
})();
Alur map asinkron
Gabungkan generator asinkron untuk membangun alur kecil yang menunggu setiap langkah.
// 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);
})();
Kebiasaan baik
Kiat:
- for await...of memerlukan objek yang dapat diiterasi secara asinkron (Symbol.asyncIterator).
- Gunakan async function* untuk mendefinisikan generator asinkron dengan mudah.
- Setiap next() ditunggu; buat pekerjaannya kecil agar aplikasi tetap responsif.
Kuis dasar objek yang dapat diiterasi secara asinkron
Pemeriksaan singkat: Persyaratan objek yang dapat diiterasi secara asinkron.
Ringkasan
Ringkasan: Gunakan async function* dan yield untuk membuat generator asinkron. Lakukan perulangan dengan for await...of, atau tunggu next() secara manual. Bangun alur asinkron kecil dengan generator pembantu.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Iterator Async — for await...of dan Generator Async” gratis?
Ya — teks lengkap “Iterator Async — for await...of dan Generator Async” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 3 pelajaran total.
Apa yang akan aku pelajari di “Iterator Async — for await...of dan Generator Async”?
Gunakan generator async dan for await...of untuk mengonsumsi nilai yang tiba seiring waktu. Pelajari Symbol.asyncIterator dan alur async sederhana Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai JavaScript Academy?
Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 3.
Berapa lama pelajaran “Iterator Async — for await...of dan Generator Async” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?
Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Protokol Iterable dan for...of
- Fungsi Generator, yield, dan Alur Kecil
- Iterator Async — for await...of dan Generator Async