Stream yang Dapat Dibaca
Konsumsi data bagian demi bagian.
Stream yang Dapat Dibaca adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. 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 4 pelajaran total.
Apa Itu Aliran Data?
API Aliran memproses data secara bertahap saat chunk tiba, alih-alih memuat semuanya ke memori. Dengan demikian, pengelolaan unduhan berukuran sangat besar, video, dan umpan langsung dapat dilakukan secara efisien.
ReadableStream
ReadableStream adalah sumber yang Anda baca sedikit demi sedikit. Peramban menyediakannya pada respons fetch, blob berkas, dan banyak sumber lainnya.
Membuat Aliran
Buat aliran dengan objek sumber dasar yang start(controller)-nya memasukkan chunk ke antrean dan menandai penyelesaian.
const stream = new ReadableStream({
start(controller) {
controller.enqueue("chunk 1");
controller.enqueue("chunk 2");
controller.close();
}
});Mendapatkan Pembaca
getReader() mengunci aliran dan mengembalikan pembaca. Selama terkunci, konsumen lain tidak dapat membacanya.
const reader = stream.getReader();Membaca Chunk
reader.read() mengembalikan janji yang menghasilkan { value, done }. done menjadi true saat aliran telah habis.
const { value, done } = await reader.read();
console.log(value, done);Perulangan Pembacaan
Lakukan perulangan pada read() hingga done bernilai true untuk mengonsumsi seluruh aliran.
const reader = stream.getReader();
while (true) {
const { value, done } = await reader.read();
if (done) break;
console.log("got", value);
}Melepaskan Kunci
Panggil reader.releaseLock() untuk membuka kunci aliran agar pembaca lain dapat mengambil alih.
reader.releaseLock();Metode pull
Sumber dasar dapat mendefinisikan pull(controller), yang dipanggil saat konsumen menginginkan lebih banyak data — sehingga data dapat dibuat secara malas sesuai permintaan.
let i = 0;
new ReadableStream({
pull(controller) {
controller.enqueue(i++);
if (i > 5) controller.close();
}
});Iterasi Asinkron
Dalam lingkungan modern, ReadableStream dapat diiterasi secara asinkron sehingga Anda dapat menggunakan for await...of, bukan perulangan manual.
for await (const chunk of stream) {
console.log(chunk);
}Membatalkan Aliran
reader.cancel(reason) menghentikan aliran lebih awal dan membebaskan sumber daya — hal yang penting untuk membatalkan unduhan berukuran besar.
await reader.cancel("user navigated away");Tee: Membagi Aliran
tee() mengembalikan dua aliran yang masing-masing menerima salinan setiap chunk — berguna untuk membaca data dua kali (misalnya untuk menyimpan di cache dan menampilkannya).
const [a, b] = stream.tee();
// read a and b independentlyPemeriksaan Singkat
Uji aliran yang dapat dibaca.
Rangkuman: Aliran yang Dapat Dibaca
Anda membuat ReadableStream, mendapatkan pembaca, mengonsumsi chunk dengan read() dalam perulangan, melepaskan kunci, menggunakan pull untuk data yang dibuat sesuai permintaan, melakukan iterasi dengan for await, dan membagi aliran dengan tee(). Berikutnya: mengalirkan respons pengambilan.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Stream yang Dapat Dibaca” gratis?
Ya — teks lengkap “Stream yang Dapat Dibaca” 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 4 pelajaran total.
Apa yang akan aku pelajari di “Stream yang Dapat Dibaca”?
Konsumsi data bagian demi bagian. 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 1 dari 4.
Berapa lama pelajaran “Stream yang Dapat Dibaca” 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
- Stream yang Dapat Dibaca
- Respons fetch Streaming
- Stream Transformasi
- Tekanan Balik dan Piping