JavaScript straumju lasītājs: asinhrona datu patērēšana

Web Streams API nodrošina jaudīgu mehānismu asinhronai datu plūsmu apstrādei JavaScript. Šīs API centrā ir ReadableStream saskarne, kas pārstāv datu avotu, un ReadableStreamReader saskarne, kas ļauj jums patērēt datus no ReadableStream. Šis visaptverošais ceļvedis pēta jēdzienus, lietojumu un labākās prakses, kas saistītas ar JavaScript straumju lasītājiem, koncentrējoties uz asinhronu datu patērēšanu.

Izpratne par tīmekļa straumēm un straumju lasītājiem

Kas ir tīmekļa straumes?

Tīmekļa straumes ir fundamentāls pamatelements asinhronai datu apstrādei modernās tīmekļa lietojumprogrammās. Tās ļauj apstrādāt datus pakāpeniski, tiklīdz tie kļūst pieejami, nevis gaidīt, kamēr viss datu avots tiek ielādēts. Tas ir īpaši noderīgi, strādājot ar lieliem failiem, tīkla pieprasījumiem un reāllaika datu plūsmām.

Galvenās tīmekļa straumju izmantošanas priekšrocības:

• Uzlabota veiktspēja: Apstrādājiet datu gabalus, tiklīdz tie tiek saņemti, samazinot latentumu un uzlabojot atsaucību.
• Atmiņas efektivitāte: Apstrādājiet lielas datu kopas, neielādējot visus datus atmiņā.
• Asinhronas operācijas: Ne-bloķējoša datu apstrāde ļauj lietotāja saskarnei palikt atsaucīgai.
• Cauruļvadi un transformācija: Straumes var savienot cauruļvados un transformēt, nodrošinot sarežģītas datu apstrādes ķēdes.

ReadableStream un ReadableStreamReader

ReadableStream pārstāv datu avotu, no kura varat lasīt. To var izveidot no dažādiem avotiem, piemēram, tīkla pieprasījumiem (izmantojot fetch), failu sistēmas operācijām vai pat pielāgotiem datu ģeneratoriem.

ReadableStreamReader ir saskarne, kas ļauj jums lasīt datus no ReadableStream. Ir pieejami dažādi lasītāju veidi, tostarp:

• ReadableStreamDefaultReader: Visizplatītākais veids, ko izmanto baitu straumju lasīšanai.
• ReadableStreamBYOBReader: Izmanto "bring your own buffer" (atnes savu buferi) lasīšanai, ļaujot jums tieši aizpildīt norādīto buferi ar datiem. Tas ir īpaši efektīvi operācijām bez kopēšanas (zero-copy).
• ReadableStreamTextDecoder (nav tiešs lasītājs, bet saistīts): Bieži tiek izmantots kopā ar lasītāju, lai dekodētu teksta datus no baitu straumes.

ReadableStreamDefaultReader pamata lietošana

Sāksim ar pamata piemēru, kā lasīt datus no ReadableStream, izmantojot ReadableStreamDefaultReader.

Piemērs: Lasīšana no Fetch atbildes

Šis piemērs demonstrē, kā iegūt datus no URL un lasīt tos kā straumi:

            async function readStreamFromURL(url) {
  const response = await fetch(url);
  const reader = response.body.getReader();

  try {
    while (true) {
      const { done, value } = await reader.read();

      if (done) {
        console.log("Stream complete");
        break;
      }

      // Process the data chunk (value is a Uint8Array)
      console.log("Received chunk:", value);
    }
  } catch (error) {
    console.error("Error reading from stream:", error);
  } finally {
    reader.releaseLock(); // Release the lock when done
  }
}

// Example usage
readStreamFromURL("https://example.com/large_data.txt");

            

              
                Copy
              
            
          

Paskaidrojums:

1. fetch(url): Iegūst datus no norādītā URL.
2. response.body.getReader(): Iegūst ReadableStreamDefaultReader no atbildes ķermeņa (body).
3. reader.read(): Asinhroni nolasa datu gabalu no straumes. Atgriež solījumu (promise), kas atrisinās ar objektu, kuram ir done un value īpašības.
4. done: Būla vērtība, kas norāda, vai straume ir pilnībā nolasīta.
5. value: Uint8Array, kas satur datu gabalu.
6. Cikls: while cikls turpina lasīt datus, līdz done ir patiess (true).
7. Kļūdu apstrāde: try...catch bloks apstrādā iespējamās kļūdas straumes lasīšanas laikā.
8. reader.releaseLock(): Atbrīvo lasītāja slēdzeni, ļaujot citiem patērētājiem piekļūt straumei. Tas ir būtiski, lai novērstu atmiņas noplūdes un nodrošinātu pareizu resursu pārvaldību.

Asinhronā iterācija ar for-await-of

Kodolīgāks veids, kā lasīt no ReadableStream, ir izmantojot for-await-of ciklu:

            async function readStreamFromURL_forAwait(url) {
  const response = await fetch(url);
  const reader = response.body;

  try {
    for await (const chunk of reader) {
      // Process the data chunk (chunk is a Uint8Array)
      console.log("Received chunk:", chunk);
    }

    console.log("Stream complete");
  } catch (error) {
    console.error("Error reading from stream:", error);
  }
}

// Example usage
readStreamFromURL_forAwait("https://example.com/large_data.txt");

            

              
                Copy
              
            
          

Šī pieeja vienkāršo kodu un uzlabo lasāmību. for-await-of cikls automātiski apstrādā asinhrono iterāciju un straumes pārtraukšanu.

Teksta dekodēšana ar ReadableStreamTextDecoder

Bieži vien jums būs nepieciešams dekodēt teksta datus no baitu straumes. TextDecoder API var izmantot kopā ar ReadableStreamReader, lai to efektīvi paveiktu.

Piemērs: Teksta dekodēšana no straumes

            async function readTextFromStream(url, encoding = 'utf-8') {
  const response = await fetch(url);
  const reader = response.body.getReader();
  const decoder = new TextDecoder(encoding);

  try {
    let accumulatedText = '';
    while (true) {
      const { done, value } = await reader.read();

      if (done) {
        console.log("Stream complete");
        break;
      }

      const textChunk = decoder.decode(value, { stream: true });
      accumulatedText += textChunk;
      console.log("Received and decoded chunk:", textChunk);
    }
    console.log("Accumulated Text: ", accumulatedText);
  } catch (error) {
    console.error("Error reading from stream:", error);
  } finally {
    reader.releaseLock();
  }
}

// Example usage
readTextFromStream("https://example.com/text_data.txt", 'utf-8');

            

              
                Copy
              
            
          

Paskaidrojums:

1. TextDecoder(encoding): Izveido TextDecoder objektu ar norādīto kodējumu (piem., 'utf-8', 'iso-8859-1').
2. decoder.decode(value, { stream: true }): Dekodē Uint8Array (value) par virkni. Opcija { stream: true } ir būtiska, lai apstrādātu daudzbaitu rakstzīmes, kas var tikt sadalītas starp datu gabaliem. Tā saglabā dekodētāja iekšējo stāvokli starp izsaukumiem.
3. Akumulācija: Tā kā straume var piegādāt rakstzīmes pa daļām, dekodētās virknes tiek uzkrātas mainīgajā accumulatedText, lai nodrošinātu, ka tiek apstrādātas pilnīgas rakstzīmes.

Kļūdu apstrāde un straumes atcelšana

Robusta kļūdu apstrāde ir būtiska, strādājot ar straumēm. Lūk, kā apstrādāt kļūdas un graciozi atcelt straumes.

Kļūdu apstrāde

Iepriekšējos piemēros redzamais try...catch bloks apstrādā kļūdas, kas rodas lasīšanas procesā. Tomēr jūs varat arī apstrādāt kļūdas, kas var rasties, veidojot straumi vai apstrādājot datu gabalus.

Straumes atcelšana

Jūs varat atcelt straumi, lai apturētu datu plūsmu. Tas ir noderīgi, ja dati vairs nav nepieciešami vai ja rodas neatkopjama kļūda.

            async function cancelStream(url) {
  const controller = new AbortController();
  const signal = controller.signal;

  try {
    const response = await fetch(url, { signal });
    const reader = response.body.getReader();

    setTimeout(() => {
      console.log("Cancelling stream...");
      controller.abort(); // Cancel the fetch request
    }, 5000); // Cancel after 5 seconds

    while (true) {
      const { done, value } = await reader.read();

      if (done) {
        console.log("Stream complete");
        break;
      }

      // Process the data chunk
      console.log("Received chunk:", value);
    }
  } catch (error) {
    console.error("Error reading from stream:", error);
    if (error.name === 'AbortError') {
      console.log('Stream aborted by user');
    }
  } finally {
    // It's good practice to always release the lock
    // even after an error.
    if(reader) {
      reader.releaseLock();
    }
  }
}

// Example usage
cancelStream("https://example.com/large_data.txt");

            

              
                Copy
              
            
          

Paskaidrojums:

1. AbortController: Izveido AbortController, kas ļauj signalizēt atcelšanas pieprasījumu.
2. signal: AbortController īpašība signal tiek nodota fetch opcijām.
3. controller.abort(): abort() izsaukšana signalizē par atcelšanu.
4. Kļūdu apstrāde: catch bloks pārbauda, vai kļūda ir AbortError, kas norāda, ka straume tika atcelta.
5. Slēdzenes atbrīvošana: finally bloks nodrošina, ka reader.releaseLock() tiek izsaukts pat tad, ja rodas kļūda, lai novērstu atmiņas noplūdes.

ReadableStreamBYOBReader: Atnes savu buferi

ReadableStreamBYOBReader ļauj jums tieši aizpildīt norādīto buferi ar datiem no straumes. Tas ir īpaši noderīgi operācijām bez kopēšanas (zero-copy), kurās vēlaties izvairīties no nevajadzīgas datu kopēšanas. Ņemiet vērā, ka BYOB lasītājiem ir nepieciešama straume, kas ir īpaši izstrādāta, lai tos atbalstītu, un tie var nedarboties ar visiem `ReadableStream` avotiem. To izmantošana parasti nodrošina labāku veiktspēju bināriem datiem.

Apsveriet šo (nedaudz mākslīgo) piemēru, lai ilustrētu `ReadableStreamBYOBReader` izmantošanu:

            async function readWithBYOB(url) {
  const response = await fetch(url);

  // Check if the stream is BYOB-compatible.
  if (!response.body.readable || !response.body.readable.pipeTo) {
    console.error("Stream is not BYOB-compatible.");
    return;
  }

  const stream = response.body.readable;

  // Create a Uint8Array to hold the data.
  const bufferSize = 1024; // Define an appropriate buffer size.
  const buffer = new Uint8Array(bufferSize);

  const reader = stream.getReader({ mode: 'byob' });

  try {
    while (true) {
      const { done, value } = await reader.read(buffer);

      if (done) {
        console.log("BYOB Stream complete.");
        break;
      }

      // 'value' is the same Uint8Array you passed to 'read'.
      // Only the section of the buffer filled by this read
      // is guaranteed to contain valid data. Check `value.byteLength`
      // to see how many bytes were actually written.

      console.log(`Read ${value.byteLength} bytes into the buffer.`);
      // Process the filled portion of the buffer. For example:
      // for (let i = 0; i < value.byteLength; i++) {
      //   console.log(value[i]); // Process each byte
      // }


    }
  } catch (error) {
    console.error("Error during BYOB stream reading:", error);
  } finally {
    reader.releaseLock();
  }
}

// Example Usage
readWithBYOB("https://example.com/binary_data.bin");
            

              
                Copy
              
            
          

Šī piemēra galvenie aspekti:

1. BYOB saderība: Ne visas straumes ir saderīgas ar BYOB lasītājiem. Parasti jums būtu nepieciešams serveris, kas saprot un atbalsta datu sūtīšanu veidā, kas optimizēts šai patērēšanas metodei. Piemērā ir iekļauta pamata pārbaude.
2. Bufera piešķiršana: Jūs izveidojat Uint8Array, kas darbosies kā buferis, kurā dati tiks lasīti tieši.
3. BYOB lasītāja iegūšana: Izmantojiet `stream.getReader({mode: 'byob'})`, lai izveidotu `ReadableStreamBYOBReader`.
4. reader.read(buffer): Tā vietā, lai izsauktu `reader.read()`, kas atgriež jaunu masīvu, jūs izsaucat `reader.read(buffer)`, nododot savu iepriekš piešķirto buferi.
5. Datu apstrāde: value, ko atgriež `reader.read(buffer)`, *ir* tas pats buferis, ko jūs nodevāt. Tomēr jūs zināt tikai to, ka bufera *daļā* līdz `value.byteLength` ir derīgi dati. Jums ir jāseko līdzi, cik baitu faktiski tika ierakstīti.

Praktiski pielietojuma gadījumi

1. Lielu žurnālfailu apstrāde

Tīmekļa straumes ir ideāli piemērotas lielu žurnālfailu apstrādei, neielādējot visu failu atmiņā. Jūs varat lasīt failu rindiņu pa rindiņai un apstrādāt katru rindiņu, tiklīdz tā kļūst pieejama. Tas ir īpaši noderīgi, analizējot servera žurnālus, lietojumprogrammu žurnālus vai citus lielus teksta failus.

2. Reāllaika datu plūsmas

Tīmekļa straumes var izmantot, lai patērētu reāllaika datu plūsmas, piemēram, akciju cenas, sensoru datus vai sociālo mediju atjauninājumus. Jūs varat izveidot savienojumu ar datu avotu un apstrādāt ienākošos datus, tiklīdz tie tiek saņemti, atjauninot lietotāja saskarni reāllaikā.

3. Video straumēšana

Tīmekļa straumes ir moderna video straumēšanas tehnoloģiju pamatkomponents. Jūs varat iegūt video datus pa daļām un dekodēt katru daļu, tiklīdz tā tiek saņemta, nodrošinot vienmērīgu un efektīvu video atskaņošanu. To izmanto populāras video straumēšanas platformas, piemēram, YouTube un Netflix.

4. Failu augšupielāde

Tīmekļa straumes var izmantot, lai efektīvāk apstrādātu failu augšupielādi. Jūs varat lasīt faila datus pa daļām un nosūtīt katru daļu uz serveri, tiklīdz tā kļūst pieejama, samazinot atmiņas patēriņu klienta pusē.

Labākās prakses

1. Vienmēr atbrīvojiet slēdzeni: Izsauciet reader.releaseLock(), kad esat pabeidzis darbu ar straumi, lai novērstu atmiņas noplūdes un nodrošinātu pareizu resursu pārvaldību. Izmantojiet finally bloku, lai garantētu, ka slēdzene tiek atbrīvota pat tad, ja rodas kļūda.
2. Apstrādājiet kļūdas graciozi: Ieviesiet robustu kļūdu apstrādi, lai notvertu un apstrādātu iespējamās kļūdas straumes lasīšanas laikā. Sniedziet lietotājam informatīvus kļūdu ziņojumus.
3. Izmantojiet TextDecoder teksta datiem: Izmantojiet TextDecoder API, lai dekodētu teksta datus no baitu straumēm. Atcerieties izmantot opciju { stream: true } daudzbaitu rakstzīmēm.
4. Apsveriet BYOB lasītājus bināriem datiem: Ja strādājat ar bināriem datiem un nepieciešama maksimāla veiktspēja, apsveriet ReadableStreamBYOBReader izmantošanu.
5. Izmantojiet AbortController atcelšanai: Izmantojiet AbortController, lai graciozi atceltu straumes, kad dati vairs nav nepieciešami.
6. Izvēlieties atbilstošus buferu izmērus: Izmantojot BYOB lasītājus, izvēlieties atbilstošu bufera izmēru, pamatojoties uz gaidāmo datu gabalu izmēru.
7. Izvairieties no bloķējošām operācijām: Pārliecinieties, ka jūsu datu apstrādes loģika nav bloķējoša, lai izvairītos no lietotāja saskarnes sasalšanas. Izmantojiet async/await, lai veiktu asinhronas operācijas.
8. Pievērsiet uzmanību rakstzīmju kodējumiem: Dekodējot tekstu, pārliecinieties, ka izmantojat pareizo rakstzīmju kodējumu, lai izvairītos no sagrozīta teksta.

Noslēgums

JavaScript straumju lasītāji nodrošina jaudīgu un efektīvu veidu, kā apstrādāt asinhronu datu patēriņu modernās tīmekļa lietojumprogrammās. Izprotot šajā ceļvedī izklāstītos jēdzienus, lietojumu un labākās prakses, jūs varat izmantot tīmekļa straumes, lai uzlabotu savu lietojumprogrammu veiktspēju, atmiņas efektivitāti un atsaucību. No lielu failu apstrādes līdz reāllaika datu plūsmu patērēšanai, tīmekļa straumes piedāvā daudzpusīgu risinājumu plašam datu apstrādes uzdevumu klāstam. Tā kā Web Streams API turpina attīstīties, tai neapšaubāmi būs arvien nozīmīgāka loma tīmekļa izstrādes nākotnē.