JavaScript Academy · Oppitunti

Luettavat streamit

Käyttäkää dataa pala kerrallaan.

Oppitunti 1/413 vaihetta

Luettavat streamit on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu JavaScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä virrat ovat

Streams API käsittelee tietoja vähitellen sitä mukaa, kun datapaloja saapuu, sen sijaan että kaikki ladattaisiin muistiin kerralla. Näin suuria latauksia, videoita ja reaaliaikaisia syötteitä voidaan käsitellä tehokkaasti.

ReadableStream

ReadableStream on lähde, josta luetaan tietoja pala kerrallaan. Selaimet tarjoavat niitä fetch-vastausten, tiedostoblobien ja monien muiden kohteiden yhteydessä.

Virran luominen

Luokaa virta taustalla olevalla lähdeoliolla, jonka start(controller) lisää paloja jonoon ja ilmoittaa käsittelyn valmistumisesta.

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

Lukijan hakeminen

getReader() lukitsee virran ja palauttaa lukijan. Lukituksen aikana mikään muu kuluttaja ei voi lukea virtaa.

const reader = stream.getReader();

Datapalojen lukeminen

reader.read() palauttaa lupauksen, joka ratkaistaan arvoksi { value, done }. done muuttuu arvoksi true, kun virta on käytetty loppuun.

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

Lukusilmukka

Kutsukaa read()-metodia silmukassa, kunnes done on true, jotta koko virta voidaan käsitellä.

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

Lukituksen vapauttaminen

Kutsukaa reader.releaseLock()-metodia vapauttaaksenne virran lukituksen, jolloin toinen lukija voi ottaa sen käyttöön.

reader.releaseLock();

pull-metodi

Taustalla oleva lähde voi määritellä pull(controller)-metodin, jota kutsutaan, kun kuluttaja tarvitsee lisää tietoja. Tämä mahdollistaa laiskan, tarpeen mukaan tapahtuvan luonnin.

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

Asynkroninen iterointi

Nykyaikaisissa ympäristöissä ReadableStream on asynkronisesti iteroitava, joten manuaalisen silmukan sijaan voidaan käyttää rakennetta for await...of.

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

Virran peruuttaminen

reader.cancel(reason) pysäyttää virran ennenaikaisesti ja vapauttaa resurssit. Tämä on tärkeää suurten latausten keskeyttämisessä.

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

Tee: virran jakaminen

tee() palauttaa kaksi virtaa, joista kumpikin saa kopion jokaisesta palasta. Tämä on hyödyllistä, kun tiedot halutaan lukea kahdesti, esimerkiksi välimuistia ja näyttöä varten.

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

Pikatarkistus

Testatkaa luettavia virtoja.

Vastaa interaktiivisessa oppitunnissa

Kertaus: luettavat virrat

Loitte ReadableStream-virran, hankitte lukijan, käsittelitte datapaloja read()-metodilla silmukassa, vapautitte lukituksen, käytitte pull-metodia laiskaan tiedon tuottamiseen, iteroitte rakenteella for await ja jaoitte virran tee()-metodilla. Seuraavaksi käsitellään fetch-vastausten suoratoistoa.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 59
Oppitunnit: 200

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Luettavat streamit” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Luettavat streamit”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Luettavat streamit”?

Käyttäkää dataa pala kerrallaan. Harjoittelet JavaScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni JavaScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin JavaScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”Luettavat streamit”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä JavaScript Academy-oppitunnilla?

Kyllä. Jokainen JavaScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: JavaScript Academy