JavaScript Academy · Lektion

Läsbara strömmar

Läs data bit för bit.

Lektion 1 av 413 steg

Läsbara strömmar är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Vad är strömmar

Streams API bearbetar data stegvis allt eftersom block anländer, i stället för att läsa in allt i minnet. Det gör det möjligt att effektivt hantera stora nedladdningar, video och direktströmmar.

ReadableStream

En ReadableStream är en källa som du läser från block för block. Webbläsare tillhandahåller sådana bland annat för fetch-svar och filblobbar.

Skapa en ström

Skapa en ström med ett underliggande källobjekt vars start(controller) lägger block i kön och signalerar när allt är klart.

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

Hämta en läsare

getReader() låser strömmen och returnerar en läsare. Så länge strömmen är låst kan ingen annan konsument läsa från den.

const reader = stream.getReader();

Läsa block

reader.read() returnerar ett löfte som löses till { value, done }. done blir true när strömmen är slut.

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

Lässlingan

Upprepa read() tills done är true för att läsa hela strömmen.

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

Frigöra låsningen

Anropa reader.releaseLock() för att låsa upp strömmen så att en annan läsare kan ta över.

reader.releaseLock();

Metoden pull

En underliggande källa kan definiera pull(controller), som anropas när konsumenten vill ha mer data — vilket möjliggör lat och behovsstyrd generering.

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

Asynkron iteration

I moderna miljöer kan en ReadableStream itereras asynkront, så att du kan använda for await...of i stället för en manuell slinga.

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

Avbryta en ström

reader.cancel(reason) stoppar strömmen i förtid och frigör resurser — viktigt när stora nedladdningar ska avbrytas.

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

tee: Dela en ström

tee() returnerar två strömmar som var och en får en kopia av varje block — användbart när du behöver läsa data två gånger, till exempel för cachelagring och visning.

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

Snabbkontroll

Testa läsbara strömmar.

Besvara frågan i den interaktiva lektionen

Repetition: Läsbara strömmar

Du skapade en ReadableStream, hämtade en läsare, läste block med read() i en slinga, frigjorde låsningen, använde pull för lat data, itererade med for await och delade strömmen med tee(). Nästa steg: strömmande fetch-svar.

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 59
Lektioner: 200

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Läsbara strömmar” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Läsbara strömmar”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Läsbara strömmar”?

Läs data bit för bit. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?

Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Läsbara strömmar”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?

Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till JavaScript Academy