JavaScript Academy · Oppitunti

fetch-vastausten suoratoisto

Käsitelkää suuria vastauksia niiden saapuessa.

Oppitunti 2/413 vaihetta

fetch-vastausten suoratoisto on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/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.

Vastaukset ovat virtoja

fetch-kutsun Response-olio tarjoaa runkonsa ReadableStream-virtana response.body-ominaisuuden kautta. Koko hyötykuorman odottamisen sijaan voitte käsitellä tavuja niiden saapuessa.

const res = await fetch("/big-file");
const stream = res.body; // ReadableStream of Uint8Array

Runkovirran lukeminen

response.body tuottaa Uint8Array-datapaloja. Hakekaa lukija ja käykää palat läpi samalla tavalla kuin mikä tahansa luettava virta.

const reader = res.body.getReader();
while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  console.log("received", value.length, "bytes");
}

Latauksen edistymisen seuraaminen

Yhdistäkää Content-Length-otsake vastaanotettujen tavujen määrään, jotta voitte näyttää edistymispalkin.

const total = +res.headers.get("Content-Length");
let loaded = 0;
while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  loaded += value.length;
  console.log(Math.round((loaded / total) * 100) + "%");
}

Tavujen dekoodaaminen tekstiksi

Kääntäkää tavupaloja merkkijonoiksi käyttämällä TextDecoder-oliota. Välittäkää sille { stream: true }, jotta paloihin jakautuvat monibyttiset merkit dekoodataan oikein.

const decoder = new TextDecoder();
let text = "";
while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  text += decoder.decode(value, { stream: true });
}

TextDecoderStream-olion käyttäminen

Vielä yksinkertaisempi tapa on johtaa tavujen virta TextDecoderStream-olion läpi, jolloin saatte suoraan merkkijonoista koostuvan virran.

const textStream = res.body.pipeThrough(new TextDecoderStream());
for await (const chunk of textStream) {
  console.log(chunk);
}

NDJSON:n jäsentäminen

Rivinvaihdoin eroteltu JSON eli NDJSON välittää yhden olion kullakin rivillä. Puskuroikaa tekstiä ja tuottakaa kokonaiset rivit sitä mukaa, kun ne muodostuvat.

let buffer = "";
for await (const chunk of textStream) {
  buffer += chunk;
  let nl;
  while ((nl = buffer.indexOf("\n")) >= 0) {
    const line = buffer.slice(0, nl);
    buffer = buffer.slice(nl + 1);
    if (line) console.log(JSON.parse(line));
  }
}

LLM-tokenien suoratoisto

Tämä malli mahdollistaa suoratoistettavan tekoälychatin: jokainen pala on token tai tapahtuma, joka näytetään heti sen saapuessa reaaliaikaisen kirjoitusefektin luomiseksi.

Fetch-virran keskeyttäminen

Välittäkää AbortSignal fetch-kutsulle ja kutsukaa controller.abort()-metodia pitkän virran pysäyttämiseksi hallitusti.

const controller = new AbortController();
fetch("/stream", { signal: controller.signal });
// later:
controller.abort();

Virheiden käsittely virroissa

Kesken virran tapahtuvat verkkovirheet hylkäävät read()-lupauksen. Ympäröikää silmukka try/catch-rakenteella keskeytysten käsittelemiseksi.

try {
  while (true) {
    const { value, done } = await reader.read();
    if (done) break;
  }
} catch (err) {
  console.log("stream interrupted", err);
}

Milloin suoratoistoa ei käytetä

Pienille vastauksille res.json() tai res.text() on yksinkertaisempi ratkaisu. Käyttäkää suoratoistoa, kun hyötykuormat ovat suuria, asteittain saapuvia tai rajoittamattomia.

Response-rungon voi käyttää vain kerran

Voitte lukea response.body-rungon vain kerran. Kutsukaa res.clone()-metodia ennen lukemista, jos tarvitsette rungon kahdesti, esimerkiksi välimuistia varten.

const copy = res.clone();
await res.body.getReader().read();
// copy still readable

Pikatarkistus

Testatkaa fetch-suoratoistoa.

Vastaa interaktiivisessa oppitunnissa

Kertaus: fetch-suoratoisto

Luitte response.body-rungon pala kerrallaan, seurasitte edistymistä, dekoodasitte tavuja TextDecoder- ja TextDecoderStream-olioilla, jäsensitte NDJSON:ää, keskeytitte suoratoiston AbortController-oliolla ja käsittelitte virheitä. Seuraavaksi käsitellään muunnosvirtoja.

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 ”fetch-vastausten suoratoisto” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “fetch-vastausten suoratoisto”. 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 ”fetch-vastausten suoratoisto”?

Käsitelkää suuria vastauksia niiden saapuessa. 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 2/4.

Kuinka kauan ”fetch-vastausten suoratoisto”-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