JavaScript Academy · Lekcja

Strumienie odczytywalne

Proszę przetwarzać dane fragment po fragmencie.

Strumienie odczytywalne to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 1 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.

Czym są strumienie

Streams API przetwarza dane przyrostowo, w miarę napływania kolejnych fragmentów, zamiast ładować wszystko do pamięci. Umożliwia to wydajne obsługiwanie ogromnych plików do pobrania, wideo i transmisji na żywo.

Strumień ReadableStream

ReadableStream jest źródłem, z którego odczytuje się dane fragment po fragmencie. Przeglądarki udostępniają takie strumienie w odpowiedziach fetch, obiektach blob plików i nie tylko.

Tworzenie strumienia

Należy utworzyć go za pomocą obiektu źródłowego, którego start(controller) dodaje fragmenty do kolejki i sygnalizuje zakończenie.

const stream = new ReadableStream({
  start(controller) {
    controller.enqueue("chunk 1");
    controller.enqueue("chunk 2");
    controller.close();
  }
});

Pobieranie czytnika

getReader() blokuje strumień i zwraca czytnik. Gdy strumień jest zablokowany, żaden inny odbiorca nie może go odczytywać.

const reader = stream.getReader();

Odczytywanie fragmentów

reader.read() zwraca obietnicę, która zostaje rozstrzygnięta do wartości { value, done }. done przyjmuje wartość true, gdy strumień zostanie wyczerpany.

const { value, done } = await reader.read();
console.log(value, done);

Pętla odczytu

Należy wywoływać read() w pętli, dopóki done nie przyjmie wartości true, aby odczytać cały strumień.

const reader = stream.getReader();
while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  console.log("got", value);
}

Zwalnianie blokady

Należy wywołać reader.releaseLock(), aby odblokować strumień i umożliwić przejęcie go innemu czytnikowi.

reader.releaseLock();

Metoda pull

Źródło może definiować metodę pull(controller), wywoływaną, gdy odbiorca potrzebuje większej ilości danych — umożliwia to ich leniwe generowanie na żądanie.

let i = 0;
new ReadableStream({
  pull(controller) {
    controller.enqueue(i++);
    if (i > 5) controller.close();
  }
});

Iteracja asynchroniczna

We współczesnych środowiskach obiekt ReadableStream obsługuje asynchroniczną iterację, dzięki czemu można użyć for await...of zamiast ręcznej pętli.

for await (const chunk of stream) {
  console.log(chunk);
}

Anulowanie strumienia

reader.cancel(reason) zatrzymuje strumień przed końcem i zwalnia zasoby — jest to ważne podczas przerywania pobierania dużych plików.

await reader.cancel("user navigated away");

tee: rozdzielanie strumienia

tee() zwraca dwa strumienie, z których każdy otrzymuje kopię każdego fragmentu — jest to przydatne, gdy dane trzeba odczytać dwukrotnie, na przykład w celu zapisania ich w pamięci podręcznej i wyświetlenia.

const [a, b] = stream.tee();
// read a and b independently

Szybki test

Przetestować strumienie odczytywalne.

Podsumowanie: strumienie odczytywalne

Utworzono obiekt ReadableStream, pobrano czytnik, odczytywano fragmenty za pomocą read() w pętli, zwolniono blokadę, użyto pull do leniwego generowania danych, iterowano za pomocą for await i rozdzielono strumień za pomocą tee(). Następny temat: strumieniowe przetwarzanie odpowiedzi fetch.

Często zadawane pytania

Czy lekcja „Strumienie odczytywalne” jest bezpłatna?

Tak — pełny tekst „Strumienie odczytywalne” 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 „Strumienie odczytywalne”?

Proszę przetwarzać dane fragment po fragmencie. Ć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 1 z 4.

Ile czasu zajmuje lekcja „Strumienie odczytywalne”?

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