JavaScript Academy · Lekcja

Odpowiedzi streamingowe fetch

Proszę przetwarzać duże odpowiedzi w miarę ich napływania.

Odpowiedzi streamingowe fetch to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 2 z 4. 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 4 lekcji w sumie.

Odpowiedzi są strumieniami

Obiekt Response zwracany przez fetch udostępnia treść jako obiekt ReadableStream za pośrednictwem response.body. Zamiast czekać na cały ładunek, można przetwarzać bajty w miarę ich napływania.

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

Odczytywanie strumienia treści

response.body udostępnia fragmenty typu Uint8Array. Należy pobrać czytnik i iterować tak samo jak w przypadku dowolnego strumienia odczytywalnego.

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

Śledzenie postępu pobierania

Należy połączyć nagłówek Content-Length z liczbą odebranych bajtów, aby wyświetlać pasek postępu.

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

Dekodowanie bajtów do tekstu

Należy użyć TextDecoder, aby przekształcać fragmenty bajtów w ciągi znaków. Trzeba przekazać { stream: true }, aby znaki wielobajtowe podzielone między fragmenty były poprawnie dekodowane.

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

Używanie TextDecoderStream

Jeszcze prościej: należy przepuścić strumień bajtów przez TextDecoderStream, aby bezpośrednio uzyskać strumień ciągów znaków.

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

Analizowanie NDJSON

NDJSON, czyli JSON rozdzielany znakami nowego wiersza, przesyła jeden obiekt w każdym wierszu. Należy buforować tekst i emitować kompletne wiersze, gdy tylko powstaną.

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

Strumieniowe przesyłanie tokenów LLM

Ten schemat jest podstawą strumieniowego czatu AI: każdy fragment jest tokenem lub zdarzeniem i jest renderowany natychmiast po odebraniu, co daje efekt pisania na żywo.

Przerywanie strumienia fetch

Należy przekazać AbortSignal do fetch i wywołać controller.abort(), aby prawidłowo zatrzymać długi strumień.

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

Obsługa błędów strumienia

Błędy sieci występujące w trakcie strumienia powodują odrzucenie obietnicy read(). Należy umieścić pętlę w bloku try/catch, aby obsługiwać przerwania.

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

Kiedy nie używać strumieni

W przypadku małych odpowiedzi prostsze są metody res.json() lub res.text(). Ze strumieni należy korzystać, gdy ładunki są duże, przesyłane stopniowo lub nieograniczone.

Treść odpowiedzi jest jednorazowa

Obiekt response.body można odczytać tylko raz. Jeśli potrzebny jest dwukrotny odczyt, na przykład do buforowania, przed odczytaniem należy wywołać res.clone().

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

Szybki test

Przetestować strumieniowe przetwarzanie fetch.

Podsumowanie: strumieniowe przetwarzanie fetch

Odczytywano response.body fragment po fragmencie, śledzono postęp, dekodowano bajty za pomocą TextDecoder/TextDecoderStream, analizowano NDJSON, przerywano działanie za pomocą AbortController i obsługiwano błędy. Następny temat: strumienie transformacji.

Często zadawane pytania

Czy lekcja „Odpowiedzi streamingowe fetch” jest bezpłatna?

Tak — pełny tekst „Odpowiedzi streamingowe fetch” 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 4 lekcji w sumie.

Co nauczysz się w „Odpowiedzi streamingowe fetch”?

Proszę przetwarzać duże odpowiedzi w miarę ich napływania. Ć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 2 z 4.

Ile czasu zajmuje lekcja „Odpowiedzi streamingowe fetch”?

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

← Powrót do JavaScript Academy