JavaScript Academy · Les

Leesbare streams

Verwerk gegevens in afzonderlijke chunks.

Les 1 van 413 stappen

Leesbare streams is een gratis JavaScript Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject JavaScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus JavaScript Academy bevat in totaal 4 lessen.

Wat zijn streams?

De Streams API verwerkt gegevens stapsgewijs terwijl brokken binnenkomen, in plaats van alles in het geheugen te laden. Hierdoor kun je grote downloads, video en livefeeds efficiënt verwerken.

De ReadableStream

Een ReadableStream is een bron waaruit je brok voor brok leest. Browsers bieden deze onder andere aan bij fetch-reacties en bestandsblobs.

Een stream maken

Maak er een met een object voor de onderliggende bron, waarvan start(controller) brokken in de wachtrij plaatst en het einde doorgeeft.

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

Een lezer ophalen

getReader() vergrendelt de stream en geeft een lezer terug. Zolang de stream vergrendeld is, kan geen andere verbruiker ervan lezen.

const reader = stream.getReader();

Brokken lezen

reader.read() geeft een promise terug die wordt opgelost met { value, done }. done wordt true wanneer de stream is uitgeput.

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

De leeslus

Blijf read() aanroepen totdat done waar is, om de volledige stream te verwerken.

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

De vergrendeling vrijgeven

Roep reader.releaseLock() aan om de stream te ontgrendelen, zodat een andere lezer het kan overnemen.

reader.releaseLock();

De methode pull

Een onderliggende bron kan pull(controller) definiëren. Deze wordt aangeroepen wanneer de verbruiker meer gegevens wil, waardoor luie generatie op aanvraag mogelijk wordt.

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

Asynchrone iteratie

In moderne omgevingen ondersteunt een ReadableStream asynchrone iteratie, zodat je for await...of kunt gebruiken in plaats van een handmatige lus.

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

Een stream annuleren

reader.cancel(reason) stopt de stream voortijdig en maakt bronnen vrij — belangrijk om grote downloads af te breken.

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

Tee: een stream splitsen

tee() geeft twee streams terug die elk een kopie van ieder brok ontvangen — handig om gegevens twee keer te lezen, bijvoorbeeld voor caching en weergave.

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

Korte controle

Test leesbare streams.

Beantwoord dit in de interactieve les

Samenvatting: leesbare streams

Je hebt een ReadableStream gemaakt, een lezer opgehaald, brokken in een lus verwerkt met read(), de vergrendeling vrijgegeven, pull gebruikt voor luie gegevensverwerking, geïtereerd met for await en gesplitst met tee(). Hierna: fetch-reacties streamen.

Gratis beginnen

Leer JavaScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 59
Lessen: 200

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Leesbare streams” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “Leesbare streams”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus JavaScript Academy bevat in totaal 4 lessen.

Wat leer ik in “Leesbare streams”?

Verwerk gegevens in afzonderlijke chunks. Je oefent met JavaScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met JavaScript Academy te beginnen?

Ervaring vooraf is niet nodig. JavaScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.

Hoe lang duurt de les “Leesbare streams”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over JavaScript Academy?

Ja. Elke les over JavaScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar JavaScript Academy