Asynkrona generatorfunktioner: Bemästra asynkrona iterationsprotokoll

Asynkron programmering är en hörnsten i modern JavaScript-utveckling, särskilt när man hanterar I/O-operationer som att hämta data från API:er, läsa filer eller interagera med databaser. Traditionellt har vi förlitat oss på Promises och async/await för att hantera dessa asynkrona uppgifter. Asynkrona generatorfunktioner erbjuder dock ett kraftfullt och elegant sätt att hantera asynkron iteration, vilket gör att vi kan bearbeta dataströmmar asynkront och effektivt.

Förståelse för asynkrona iterationsprotokoll

Innan vi dyker in i asynkrona generatorfunktioner är det viktigt att förstå de asynkrona iterationsprotokollen som de bygger på. Dessa protokoll definierar hur asynkrona datakällor kan itereras över på ett kontrollerat och förutsägbart sätt.

Det asynkrona iterable-protokollet

Det asynkrona iterable-protokollet definierar ett objekt som kan itereras över asynkront. Ett objekt uppfyller detta protokoll om det har en metod med nyckeln Symbol.asyncIterator som returnerar en asynkron iterator.

Tänk på en iterable som en spellista med låtar. Den asynkrona iterablen är som en spellista där varje låt måste laddas (asynkront) innan den kan spelas upp.

Exempel:

            const asyncIterable = {
  [Symbol.asyncIterator]() {
    return {
      next() {
        // Hämta nästa värde asynkront
      }
    };
  }
};

            

              
                Copy
              
            
          

Det asynkrona iterator-protokollet

Det asynkrona iterator-protokollet definierar metoderna som en asynkron iterator måste implementera. Ett objekt som uppfyller detta protokoll måste ha en next()-metod, och valfritt return()- och throw()-metoder.

• next(): Denna metod returnerar ett Promise som resolvar till ett objekt med två egenskaper: value och done. value innehåller nästa värde i sekvensen, och done är en boolean som indikerar om iterationen är slutförd.
• return(): (Valfri) Denna metod returnerar ett Promise som resolvar till ett objekt med egenskaperna value och done. Den signalerar att iteratorn stängs. Detta är användbart för att frigöra resurser.
• throw(): (Valfri) Denna metod returnerar ett Promise som rejectar med ett fel. Den används för att signalera att ett fel har inträffat under iterationen.

Exempel:

            const asyncIterator = {
  next() {
    return new Promise((resolve) => {
      // Hämta nästa värde asynkront
      setTimeout(() => {
        resolve({ value: /* något värde */, done: false });
      }, 100);
    });
  },
  return() {
    return Promise.resolve({ value: undefined, done: true });
  },
  throw(error) {
    return Promise.reject(error);
  }
};

            

              
                Copy
              
            
          

Introduktion till asynkrona generatorfunktioner

Asynkrona generatorfunktioner erbjuder ett bekvämare och mer läsbart sätt att skapa asynkrona iteratorer och iterables. De kombinerar kraften hos generatorer med asynkroniteten hos Promises.

Syntax

En asynkron generatorfunktion deklareras med syntaxen async function*:

            async function* myAsyncGenerator() {
  // Asynkrona operationer och yield-uttryck här
}

            

              
                Copy
              
            
          

Nyckelordet yield

Inuti en asynkron generatorfunktion används nyckelordet yield för att producera värden asynkront. Varje yield-uttryck pausar effektivt generatorfunktionens exekvering tills det yieldade Promiset resolvar.

Exempel:

            async function* fetchUsers() {
  const user1 = await fetch('https://example.com/api/users/1').then(res => res.json());
  yield user1;

  const user2 = await fetch('https://example.com/api/users/2').then(res => res.json());
  yield user2;

  const user3 = await fetch('https://example.com/api/users/3').then(res => res.json());
  yield user3;
}

            

              
                Copy
              
            
          

Använda asynkrona generatorer med for await...of

Du kan iterera över värdena som produceras av en asynkron generatorfunktion med hjälp av loopen for await...of. Denna loop hanterar automatiskt den asynkrona resolvningen av Promises som yieldas av generatorn.

Exempel:

            async function main() {
  for await (const user of fetchUsers()) {
    console.log(user);
  }
}

main();

            

              
                Copy
              
            
          

Praktiska användningsfall för asynkrona generatorfunktioner

Asynkrona generatorfunktioner är utmärkta i scenarier som involverar asynkrona dataströmmar, såsom:

1. Strömma data från API:er

Föreställ dig att du hämtar en stor datamängd från ett API som stöder paginering. Istället för att hämta hela datamängden på en gång kan du använda en asynkron generatorfunktion för att hämta och yielda sidor med data inkrementellt.

Exempel (Hämta paginerad data):

            async function* fetchPaginatedData(url, pageSize = 10) {
  let page = 1;

  while (true) {
    const response = await fetch(`${url}?page=${page}&pageSize=${pageSize}`);
    const data = await response.json();

    if (data.length === 0) {
      return; // Ingen mer data
    }

    for (const item of data) {
      yield item;
    }

    page++;
  }
}

async function main() {
  for await (const item of fetchPaginatedData('https://api.example.com/data')) {
    console.log(item);
  }
}

main();

            

              
                Copy
              
            
          

Internationellt exempel (API för växelkurser):

            async function* fetchExchangeRates(currencyPair, startDate, endDate) {
  let currentDate = new Date(startDate);

  while (currentDate <= new Date(endDate)) {
    const dateString = currentDate.toISOString().split('T')[0]; // ÅÅÅÅ-MM-DD
    const url = `https://api.exchangerate.host/${dateString}?base=${currencyPair.substring(0,3)}&symbols=${currencyPair.substring(3,6)}`;
    try {
      const response = await fetch(url);
      const data = await response.json();

      if (data.success) {
        yield {
          date: dateString,
          rate: data.rates[currencyPair.substring(3,6)],
        };
      }

    } catch (error) {
      console.error(`Error fetching data for ${dateString}:`, error);
      // Du kanske vill hantera fel på ett annat sätt, t.ex. försöka igen eller hoppa över datumet.
    }

    currentDate.setDate(currentDate.getDate() + 1);
  }
}

async function main() {
  const currencyPair = 'EURUSD';
  const startDate = '2023-01-01';
  const endDate = '2023-01-10';

  for await (const rate of fetchExchangeRates(currencyPair, startDate, endDate)) {
    console.log(rate);
  }
}

main();

            

              
                Copy
              
            
          

Detta exempel hämtar dagliga växelkurser från EUR till USD för ett givet datumintervall. Det hanterar potentiella fel under API-anrop. Kom ihåg att ersätta `https://api.exchangerate.host` med en tillförlitlig och lämplig API-slutpunkt.

2. Bearbeta stora filer

När du arbetar med stora filer kan det vara ineffektivt att läsa in hela filen i minnet. Asynkrona generatorfunktioner låter dig läsa filen rad för rad eller i bitar (chunks), och bearbeta varje bit asynkront.

Exempel (Läsa en stor fil rad för rad - Node.js):

            const fs = require('fs');
const readline = require('readline');

async function* readLines(filePath) {
  const fileStream = fs.createReadStream(filePath);

  const rl = readline.createInterface({
    input: fileStream,
    crlfDelay: Infinity
  });

  for await (const line of rl) {
    yield line;
  }
}

async function main() {
  for await (const line of readLines('large_file.txt')) {
    // Bearbeta varje rad asynkront
    console.log(line);
  }
}

main();

            

              
                Copy
              
            
          

Detta Node.js-exempel demonstrerar hur man läser en fil rad för rad med hjälp av fs.createReadStream och readline.createInterface. Den asynkrona generatorfunktionen readLines yieldar varje rad asynkront.

3. Hantera dataströmmar i realtid (WebSockets, Server-Sent Events)

Asynkrona generatorfunktioner är väl lämpade för att bearbeta dataströmmar i realtid från källor som WebSockets eller Server-Sent Events (SSE). Du kan kontinuerligt yielda data allt eftersom den anländer från strömmen.

Exempel (Bearbeta data från en WebSocket - Konceptuellt):

            // Detta är ett konceptuellt exempel och kräver ett WebSocket-bibliotek som 'ws' (Node.js) eller webbläsarens inbyggda WebSocket API.

async function* processWebSocketStream(url) {
  const websocket = new WebSocket(url);

  websocket.onmessage = (event) => {
    //Detta måste hanteras utanför generatorn.
    //Vanligtvis skulle man lägga event.data i en kö
    //och generatorn skulle asynkront hämta från kön
    //via ett Promise som resolvar när data finns tillgänglig.
  };
  websocket.onerror = (error) => {
     //Hantera fel.
  };
  websocket.onclose = () => {
    //Hantera stängning.
  }

  //Den faktiska yielding- och köhanteringen skulle ske här,
  //med hjälp av Promises för att synkronisera mellan websocket.onmessage
  //-händelsen och den asynkrona generatorfunktionen.
  //Detta är en förenklad illustration.

  //while(true){ //Använd detta om händelser köas korrekt.
  //  const data = await new Promise((resolve) => {
  //   // Resolva promiset när data finns tillgänglig i kön.
  //  })
  //  yield data
  //}

}

async function main() {
  // for await (const message of processWebSocketStream('wss://example.com/ws')) {
  //   console.log(message);
  // }
  console.log("WebSocket-exempel - endast konceptuellt. Se kommentarer i koden för detaljer.");
}

main();

            

              
                Copy
              
            
          

Viktiga anmärkningar om WebSocket-exemplet:

• Det angivna WebSocket-exemplet är primärt konceptuellt eftersom en direkt integration av WebSockets händelsedrivna natur med asynkrona generatorer kräver noggrann synkronisering med hjälp av Promises och köer.
• Verkliga implementationer involverar vanligtvis att buffra inkommande WebSocket-meddelanden i en kö och använda ett Promise för att signalera till den asynkrona generatorn när ny data är tillgänglig. Detta säkerställer att generatorn inte blockerar medan den väntar på data.

4. Implementera anpassade asynkrona iteratorer

Asynkrona generatorfunktioner gör det enkelt att skapa anpassade asynkrona iteratorer för vilken asynkron datakälla som helst. Du kan definiera din egen logik för att hämta, bearbeta och yielda värden.

Exempel (Generera en sekvens av nummer asynkront):

            async function* generateNumbers(start, end, delay) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, delay));
    yield i;
  }
}

async function main() {
  for await (const number of generateNumbers(1, 5, 500)) {
    console.log(number);
  }
}

main();

            

              
                Copy
              
            
          

Detta exempel genererar en sekvens av nummer från start till end, med en specificerad delay mellan varje nummer. Raden await new Promise(resolve => setTimeout(resolve, delay)) introducerar en asynkron fördröjning.

Felhantering

Felhantering är avgörande när man arbetar med asynkrona generatorfunktioner. Du kan använda try...catch-block inom generatorfunktionen för att hantera fel som uppstår under asynkrona operationer.

Exempel (Felhantering i en asynkron generator):

            async function* fetchData(url) {
  try {
    const response = await fetch(url);
    const data = await response.json();
    yield data;
  } catch (error) {
    console.error('Error fetching data:', error);
    // Du kan välja att kasta om felet, yielda ett standardvärde eller stoppa iterationen.
    // Till exempel, yield { error: error.message };
    throw error;
  }
}

async function main() {
  try {
    for await (const data of fetchData('https://example.com/api/invalid')) {
      console.log(data);
    }
  } catch (error) {
    console.error('Error during iteration:', error);
  }
}

main();

            

              
                Copy
              
            
          

Detta exempel demonstrerar hur man hanterar fel som kan uppstå under fetch-operationen. try...catch-blocket fångar eventuella fel och loggar dem till konsolen. Du kan också kasta om felet så att det fångas av den som konsumerar generatorn, eller yielda ett felobjekt.

Fördelar med att använda asynkrona generatorfunktioner

• Förbättrad kodläsbarhet: Asynkrona generatorfunktioner gör asynkron iterationskod mer läsbar och underhållbar jämfört med traditionella Promise-baserade tillvägagångssätt.
• Förenklat asynkront kontrollflöde: De erbjuder ett mer naturligt och sekventiellt sätt att uttrycka asynkron logik, vilket gör den lättare att resonera kring.
• Effektiv resurshantering: De låter dig bearbeta data i bitar eller strömmar, vilket minskar minnesförbrukningen och förbättrar prestandan, särskilt när du hanterar stora datamängder eller dataströmmar i realtid.
• Tydlig ansvarsfördelning: De separerar logiken för att generera data från logiken för att konsumera data, vilket främjar modularitet och återanvändbarhet.

Jämförelse med andra asynkrona tillvägagångssätt

Asynkrona generatorer vs. Promises

Även om Promises är grundläggande för asynkrona operationer är de mindre lämpade för att hantera sekvenser av asynkrona värden. Asynkrona generatorer erbjuder ett mer strukturerat och effektivt sätt att iterera över asynkrona dataströmmar.

Asynkrona generatorer vs. RxJS Observables

RxJS Observables är ett annat kraftfullt verktyg för att hantera asynkrona dataströmmar. Observables erbjuder mer avancerade funktioner som operatorer för att transformera, filtrera och kombinera dataströmmar. Asynkrona generatorer är dock ofta enklare att använda för grundläggande scenarier med asynkron iteration.

Kompatibilitet med webbläsare och Node.js

Asynkrona generatorfunktioner har brett stöd i moderna webbläsare och Node.js. De är tillgängliga i alla större webbläsare som stöder ES2018 (ECMAScript 2018) och Node.js version 10 och senare.

Du kan använda verktyg som Babel för att transpilera din kod till äldre versioner av JavaScript om du behöver stödja äldre miljöer.

Slutsats

Asynkrona generatorfunktioner är ett värdefullt tillskott till JavaScripts verktygslåda för asynkron programmering. De erbjuder ett kraftfullt och elegant sätt att hantera asynkron iteration, vilket gör det enklare att bearbeta dataströmmar effektivt och på ett underhållbart sätt. Genom att förstå de asynkrona iterationsprotokollen och syntaxen för asynkrona generatorfunktioner kan du dra nytta av deras fördelar i ett brett spektrum av tillämpningar, från att strömma data från API:er till att bearbeta stora filer och hantera dataströmmar i realtid.

Vidare lärande

• MDN Web Docs: AsyncGeneratorFunction
• Exploring ES2018: Asynchronous Iteration
• Node.js-dokumentation: Konsultera den officiella Node.js-dokumentationen för strömmar och filsystemoperationer.