JavaScript Academy · Ders

fetch Yanıtlarını Akış Olarak İşleme

Büyük yanıtları geldikçe işleyin.

fetch Yanıtlarını Akış Olarak İşleme, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.

Yanıtlar akışlardır

Bir fetch Response nesnesi, gövdesini response.body aracılığıyla ReadableStream olarak sunar. Tüm yükü beklemek yerine baytları geldikçe işleyebilirsiniz.

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

Gövde akışını okuma

response.body, Uint8Array parçaları sağlar. Bir okuyucu alın ve diğer okunabilir akışlarda olduğu gibi döngü kurun.

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

İndirme ilerlemesini izleme

Bir ilerleme çubuğu göstermek için Content-Length üst bilgisini alınan baytlarla birleştirin.

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) + "%");
}

Baytları metne dönüştürme

Bayt parçalarını dizelere dönüştürmek için TextDecoder kullanın. Parçalar arasında bölünen çok baytlı karakterlerin doğru çözümlenmesi için { stream: true } iletin.

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

TextDecoderStream kullanma

Daha da basit bir yol şudur: Doğrudan dizelerden oluşan bir akış elde etmek için bayt akışını TextDecoderStream üzerinden aktarın.

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

NDJSON ayrıştırma

Satır sonlarıyla ayrılmış JSON, her satırda bir nesne olacak şekilde akış sağlar. Metni ara belleğe alın ve oluştukça tamamlanan satırları gönderin.

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));
  }
}

LLM belirteçlerini akışla işleme

Bu yöntem, akış kullanan yapay zekâ sohbetlerinin temelini oluşturur: her parça bir belirteç veya olaydır ve canlı yazma efekti için gelir gelmez görüntülenir.

Getirme akışını iptal etme

AbortSignal nesnesini fetch işlevine iletin ve uzun bir akışı düzgün biçimde durdurmak için controller.abort() çağırın.

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

Akış hatalarını yönetme

Akışın ortasında oluşan ağ hataları read() sözünü reddeder. Kesintileri yönetmek için döngüyü try/catch içine alın.

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

Ne zaman akış kullanılmamalı

Küçük yanıtlar için res.json() veya res.text() daha basittir. Yükler büyük, aşamalı veya sınırsız olduğunda akış kullanmayı tercih edin.

Yanıt gövdesi tek kullanımlıktır

response.body yalnızca bir kez okunabilir. İki kez okumanız gerekiyorsa (örneğin önbelleğe almak için) okumadan önce res.clone() çağırın.

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

Kısa kontrol

Akış kullanan getirme işlemlerini deneyin.

Özet: Akış kullanan getirme

response.body okudunuz parça parça, ilerlemeyi izlediniz, baytları TextDecoder/TextDecoderStream ile çözdünüz, NDJSON ayrıştırdınız, AbortController ile iptal ettiniz ve hataları yönettiniz. Sırada dönüştürme akışları var.

Sıkça Sorulan Sorular

“fetch Yanıtlarını Akış Olarak İşleme” dersi ücretsiz mi?

Evet — “fetch Yanıtlarını Akış Olarak İşleme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.

“fetch Yanıtlarını Akış Olarak İşleme” dersinde ne öğreneceğim?

Büyük yanıtları geldikçe işleyin. JavaScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te JavaScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“fetch Yanıtlarını Akış Olarak İşleme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← JavaScript Academy Sayfasına Dön