JavaScript Academy · Lekcja

Kontrola przepływu i potokowanie

Proszę zarządzać przepływem za pomocą pipeTo i pipeThrough.

Kontrola przepływu i potokowanie to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 4 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.

Problem backpressure

Jeśli producent generuje dane szybciej, niż konsument może je obsłużyć, pamięć się zapełnia. Backpressure to mechanizm, za pomocą którego wolny konsument informuje szybkiego producenta, że powinien zwolnić.

WritableStream

WritableStream to miejsce docelowe, do którego zapisuje się fragmenty. Jego metoda odbiornika write(chunk) może działać asynchronicznie, sygnalizując gotowość na przyjęcie kolejnego fragmentu.

const sink = new WritableStream({
  write(chunk) {
    console.log("writing", chunk);
  }
});

Pobieranie obiektu writer

getWriter() blokuje strumień do zapisu i zwraca obiekt writer z metodami write(), close() oraz obietnicą ready.

const writer = sink.getWriter();
await writer.write("hello");
await writer.close();

Sygnał ready

Przed zapisem należy zaczekać na writer.ready. Obietnica zostaje rozstrzygnięta, gdy strumień może przyjąć więcej danych — tak działa backpressure.

await writer.ready;
await writer.write(chunk);

pipeTo

readable.pipeTo(writable) łączy źródło z miejscem docelowym i automatycznie zarządza backpressure. Zwraca obietnicę, która zostaje rozstrzygnięta po zakończeniu przesyłania.

await readableStream.pipeTo(writableStream);
console.log("done piping");

pipeThrough

pipeThrough(transform) wstawia transformację między źródłem a odbiornikiem i zwraca przekształcony strumień do odczytu. Można połączyć kilka takich etapów w potok.

sourceStream
  .pipeThrough(new TextDecoderStream())
  .pipeThrough(parser)
  .pipeTo(consumer);

Wartości high water mark

Strategia kolejkowania określa za pomocą highWaterMark, ile fragmentów może oczekiwać w kolejce, zanim zadziała backpressure. Wartość tę należy dostosować, aby zachować równowagę między przepustowością a zużyciem pamięci.

new ReadableStream(source, new CountQueuingStrategy({ highWaterMark: 4 }));

desiredSize

desiredSize kontrolera informuje producenta, ile miejsca pozostało w kolejce. Gdy wartość osiągnie zero lub spadnie poniżej zera, należy przerwać dodawanie elementów do kolejki.

pull(controller) {
  while (controller.desiredSize > 0) {
    controller.enqueue(nextChunk());
  }
}

Przerywanie potoku

Do pipeTo należy przekazać { signal }, aby przerwać cały potok za pomocą AbortController.

const ctrl = new AbortController();
readable.pipeTo(writable, { signal: ctrl.signal });
ctrl.abort();

Opcje potoku

pipeTo przyjmuje opcje preventClose, preventAbort i preventCancel, które określają sposób propagowania błędów i zakończenia między końcami potoku.

readable.pipeTo(writable, { preventClose: true });

Pełny potok

Połączmy wszystko: pobieranie bajtów, dekodowanie, transformacja i zapis do odbiornika — wszystko z automatyczną kontrolą przepływu.

const res = await fetch("/data");
await res.body
  .pipeThrough(new TextDecoderStream())
  .pipeThrough(lineSplitter)
  .pipeTo(uiSink);

Szybki test

Proszę przetestować backpressure.

Podsumowanie: backpressure i potoki

Poznali Państwo WritableStream i obiekty writer, czekali na ready w ramach obsługi backpressure, łączyli strumienie za pomocą pipeTo/pipeThrough, dostosowywali highWaterMark, obserwowali desiredSize i przerywali potoki. To kończy omawianie Streams API.

Często zadawane pytania

Czy lekcja „Kontrola przepływu i potokowanie” jest bezpłatna?

Tak — pełny tekst „Kontrola przepływu i potokowanie” 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 „Kontrola przepływu i potokowanie”?

Proszę zarządzać przepływem za pomocą pipeTo i pipeThrough. Ć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 4 z 4.

Ile czasu zajmuje lekcja „Kontrola przepływu i potokowanie”?

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