JavaScript Academy · Pelajaran

Respons fetch Streaming

Proses respons besar saat respons tersebut tiba.

Respons fetch Streaming adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.

Respons Adalah Aliran

Response dari fetch menyediakan isi sebagai ReadableStream melalui response.body. Alih-alih menunggu seluruh payload, Anda dapat memproses bita saat tiba.

const res = await fetch("/big-file");
const stream = res.body; // ReadableStream of Uint8Array

Membaca Aliran Isi

response.body menghasilkan chunk Uint8Array. Dapatkan pembaca dan lakukan perulangan seperti pada aliran yang dapat dibaca lainnya.

const reader = res.body.getReader();
while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  console.log("received", value.length, "bytes");
}

Melacak Kemajuan Unduhan

Gabungkan tajuk Content-Length dengan jumlah bita yang diterima untuk menampilkan bilah kemajuan.

const total = +res.headers.get("Content-Length");
let loaded = 0;
while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  loaded += value.length;
  console.log(Math.round((loaded / total) * 100) + "%");
}

Mendekode Bita Menjadi Teks

Gunakan TextDecoder untuk mengubah chunk bita menjadi string. Berikan { stream: true } agar karakter multibita yang terpisah di antara chunk dapat didekode dengan benar.

const decoder = new TextDecoder();
let text = "";
while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  text += decoder.decode(value, { stream: true });
}

Menggunakan TextDecoderStream

Caranya bahkan lebih sederhana: alirkan aliran bita melalui TextDecoderStream untuk langsung mendapatkan aliran string.

const textStream = res.body.pipeThrough(new TextDecoderStream());
for await (const chunk of textStream) {
  console.log(chunk);
}

Mengurai NDJSON

JSON yang dibatasi baris baru mengalirkan satu objek per baris. Simpan teks sementara dan keluarkan baris lengkap saat terbentuk.

let buffer = "";
for await (const chunk of textStream) {
  buffer += chunk;
  let nl;
  while ((nl = buffer.indexOf("\n")) >= 0) {
    const line = buffer.slice(0, nl);
    buffer = buffer.slice(nl + 1);
    if (line) console.log(JSON.parse(line));
  }
}

Token LLM yang Dialirkan

Pola ini mendukung obrolan AI yang dialirkan: setiap chunk adalah token atau peristiwa yang langsung ditampilkan saat tiba sehingga menghasilkan efek pengetikan langsung.

Membatalkan Aliran Pengambilan

Berikan AbortSignal ke fetch dan panggil controller.abort() untuk menghentikan aliran panjang dengan rapi.

const controller = new AbortController();
fetch("/stream", { signal: controller.signal });
// later:
controller.abort();

Menangani Kesalahan Aliran

Kegagalan jaringan di tengah aliran menyebabkan janji read() ditolak. Bungkus perulangan dalam try/catch untuk menangani gangguan.

try {
  while (true) {
    const { value, done } = await reader.read();
    if (done) break;
  }
} catch (err) {
  console.log("stream interrupted", err);
}

Kapan Tidak Perlu Mengalirkan Data

Untuk respons kecil, res.json() atau res.text() lebih sederhana. Gunakan pengaliran saat payload berukuran besar, bertahap, atau tidak terbatas.

Isi Respons Hanya Dapat Digunakan Sekali

Anda hanya dapat membaca response.body sekali. Panggil res.clone() sebelum membaca jika Anda memerlukannya dua kali (misalnya untuk menyimpan di cache).

const copy = res.clone();
await res.body.getReader().read();
// copy still readable

Pemeriksaan Singkat

Uji pengaliran pengambilan.

Rangkuman: Pengaliran Pengambilan

Anda membaca response.body chunk demi chunk, melacak kemajuan, mendekode bita dengan TextDecoder/TextDecoderStream, mengurai NDJSON, membatalkan dengan AbortController, dan menangani kesalahan. Berikutnya: aliran transformasi.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Respons fetch Streaming” gratis?

Ya — teks lengkap “Respons fetch Streaming” 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 “Respons fetch Streaming”?

Proses respons besar saat respons tersebut tiba. 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 2 dari 4.

Berapa lama pelajaran “Respons fetch Streaming” 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

← Kembali ke JavaScript Academy