JavaScript Async Generator Helpers: Bemästra skapande och hantering av strömmar

Asynkron programmering i JavaScript har utvecklats betydligt under åren. Med introduktionen av Async Generators och Async Iterators fick utvecklare kraftfulla verktyg för att hantera strömmar av asynkron data. Nu förbättrar JavaScript Async Generator Helpers dessa funktioner ytterligare och erbjuder ett mer strömlinjeformat och uttrycksfullt sätt att skapa, transformera och hantera asynkrona dataströmmar. Denna guide utforskar grunderna i Async Generator Helpers, går igenom deras funktioner och demonstrerar deras praktiska tillämpningar med tydliga exempel.

Förståelse för Async Generators och Iterators

Innan vi dyker in i Async Generator Helpers är det avgörande att förstå de underliggande koncepten för Async Generators och Async Iterators.

Async Generators

En Async Generator är en funktion som kan pausas och återupptas, och som producerar värden asynkront. Den låter dig generera en sekvens av värden över tid utan att blockera huvudtråden. Async Generators definieras med syntaxen async function*.

Exempel:

async function* generateSequence(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 500)); // Simulera asynkron operation
    yield i;
  }
}

// Användning
const sequence = generateSequence(1, 5);

Async Iterators

En Async Iterator är ett objekt som tillhandahåller en next()-metod, vilken returnerar ett promise som resolverar till ett objekt innehållande nästa värde i sekvensen och en done-egenskap som indikerar om sekvensen är slut. Async Iterators konsumeras med for await...of-loopar.

Exempel:

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

async function consumeSequence() {
  const sequence = generateSequence(1, 5);
  for await (const value of sequence) {
    console.log(value);
  }
}

consumeSequence();

Introduktion till Async Generator Helpers

Async Generator Helpers är en uppsättning metoder som utökar funktionaliteten hos Async Generator-prototyper. De erbjuder bekväma sätt att manipulera asynkrona dataströmmar, vilket gör koden mer läsbar och underhållbar. Dessa hjälpfunktioner fungerar 'lazy', vilket innebär att de bara bearbetar data när det behövs, vilket kan förbättra prestandan.

Följande Async Generator Helpers är vanligtvis tillgängliga (beroende på JavaScript-miljö och polyfills):

• map
• filter
• take
• drop
• flatMap
• reduce
• toArray
• forEach

Detaljerad genomgång av Async Generator Helpers

1. `map()`

`map()`-hjälpfunktionen transformerar varje värde i den asynkrona sekvensen genom att tillämpa en angiven funktion. Den returnerar en ny Async Generator som producerar de transformerade värdena.

Syntax:

asyncGenerator.map(callback)

Exempel: Konvertera en ström av tal till deras kvadrater.

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

async function processNumbers() {
  const numbers = generateNumbers(1, 5);
  const squares = numbers.map(async (num) => {
    await new Promise(resolve => setTimeout(resolve, 100)); // Simulera asynkron operation
    return num * num;
  });

  for await (const square of squares) {
    console.log(square);
  }
}

processNumbers();

Verkligt användningsfall: Föreställ dig att hämta användardata från flera API:er och behöva transformera datan till ett konsekvent format. map() kan användas för att asynkront tillämpa en transformeringsfunktion på varje användarobjekt.

async function* fetchUsersFromMultipleAPIs(apiEndpoints) {
  for (const endpoint of apiEndpoints) {
    const response = await fetch(endpoint);
    const data = await response.json();
    for (const user of data) {
      yield user;
    }
  }
}

async function processUsers() {
  const apiEndpoints = [
    'https://api.example.com/users1',
    'https://api.example.com/users2'
  ];

  const users = fetchUsersFromMultipleAPIs(apiEndpoints);

  const normalizedUsers = users.map(async (user) => {
    // Normalisera användardataformat
    return {
      id: user.userId || user.id,
      name: user.fullName || user.name,
      email: user.emailAddress || user.email
    };
  });

  for await (const normalizedUser of normalizedUsers) {
    console.log(normalizedUser);
  }
}

2. `filter()`

`filter()`-hjälpfunktionen skapar en ny Async Generator som endast producerar de värden från den ursprungliga sekvensen som uppfyller ett angivet villkor. Den låter dig selektivt inkludera värden i den resulterande strömmen.

Syntax:

asyncGenerator.filter(callback)

Exempel: Filtrera en ström av tal för att endast inkludera jämna tal.

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

async function processNumbers() {
  const numbers = generateNumbers(1, 10);
  const evenNumbers = numbers.filter(async (num) => {
    await new Promise(resolve => setTimeout(resolve, 100));
    return num % 2 === 0;
  });

  for await (const evenNumber of evenNumbers) {
    console.log(evenNumber);
  }
}

processNumbers();

Verkligt användningsfall: Bearbeta en ström av loggposter och filtrera bort poster baserat på deras allvarlighetsgrad. Till exempel, att endast bearbeta fel och varningar.

async function* readLogFile(filePath) {
  // Simulera läsning av en loggfil rad för rad asynkront
  const logEntries = [
    { timestamp: '...', level: 'INFO', message: '...' },
    { timestamp: '...', level: 'ERROR', message: '...' },
    { timestamp: '...', level: 'WARNING', message: '...' },
    { timestamp: '...', level: 'INFO', message: '...' },
    { timestamp: '...', level: 'ERROR', message: '...' }
  ];

  for (const entry of logEntries) {
    await new Promise(resolve => setTimeout(resolve, 50));
    yield entry;
  }
}

async function processLogs() {
  const logEntries = readLogFile('path/to/log/file.log');
  const errorAndWarningLogs = logEntries.filter(async (entry) => {
    return entry.level === 'ERROR' || entry.level === 'WARNING';
  });

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

3. `take()`

`take()`-hjälpfunktionen skapar en ny Async Generator som endast producerar de första n värdena från den ursprungliga sekvensen. Den är användbar för att begränsa antalet objekt som bearbetas från en potentiellt oändlig eller mycket stor ström.

Syntax:

asyncGenerator.take(n)

Exempel: Ta de första 3 talen från en ström av tal.

async function* generateNumbers(start) {
  let i = start;
  while (true) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i++;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1);
  const firstThree = numbers.take(3);

  for await (const num of firstThree) {
    console.log(num);
  }
}

processNumbers();

Verkligt användningsfall: Visa de 5 bästa sökresultaten från ett asynkront sök-API.

async function* search(query) {
  // Simulera hämtning av sökresultat från ett API
  const results = [
    { title: 'Result 1', url: '...' },
    { title: 'Result 2', url: '...' },
    { title: 'Result 3', url: '...' },
    { title: 'Result 4', url: '...' },
    { title: 'Result 5', url: '...' },
    { title: 'Result 6', url: '...' }
  ];

  for (const result of results) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield result;
  }
}

async function displayTopSearchResults(query) {
  const searchResults = search(query);
  const top5Results = searchResults.take(5);

  for await (const result of top5Results) {
    console.log(result);
  }
}

4. `drop()`

`drop()`-hjälpfunktionen skapar en ny Async Generator som hoppar över de första n värdena från den ursprungliga sekvensen och producerar de återstående värdena. Den är motsatsen till take() och är användbar för att ignorera de inledande delarna av en ström.

Syntax:

asyncGenerator.drop(n)

Exempel: Hoppa över de första 2 talen från en ström av tal.

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

async function processNumbers() {
  const numbers = generateNumbers(1, 5);
  const remainingNumbers = numbers.drop(2);

  for await (const num of remainingNumbers) {
    console.log(num);
  }
}

processNumbers();

Verkligt användningsfall: Paginera genom ett stort dataset hämtat från ett API, och hoppa över de redan visade resultaten.

async function* fetchData(url, pageSize, pageNumber) {
  const offset = (pageNumber - 1) * pageSize;
  // Simulera hämtning av data med offset
  const data = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
    { id: 4, name: 'Item 4' },
    { id: 5, name: 'Item 5' },
    { id: 6, name: 'Item 6' },
    { id: 7, name: 'Item 7' },
    { id: 8, name: 'Item 8' }
  ];

  const pageData = data.slice(offset, offset + pageSize);

  for (const item of pageData) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield item;
  }
}

async function displayPage(pageNumber) {
  const pageSize = 3;
  const allData = fetchData('api/data', pageSize, pageNumber);
  const page = allData.drop((pageNumber - 1) * pageSize);  // hoppa över objekt från tidigare sidor

  const results = page.take(pageSize);


  for await (const item of results) {
    console.log(item);
  }
}

// Exempelanvändning
displayPage(2);

5. `flatMap()`

`flatMap()`-hjälpfunktionen transformerar varje värde i den asynkrona sekvensen genom att tillämpa en funktion som returnerar en Async Iterable. Den plattar sedan ut den resulterande Async Iterable till en enda Async Generator. Detta är användbart för att transformera varje värde till en ström av värden och sedan kombinera dessa strömmar.

Syntax:

asyncGenerator.flatMap(callback)

Exempel: Transformera en ström av meningar till en ström av ord.

async function* generateSentences() {
  const sentences = [
    'This is the first sentence.',
    'This is the second sentence.',
    'This is the third sentence.'
  ];

  for (const sentence of sentences) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield sentence;
  }
}

async function* stringToWords(sentence) {
    const words = sentence.split(' ');
    for (const word of words) {
        await new Promise(resolve => setTimeout(resolve, 50));
        yield word;
    }
}

async function processSentences() {
  const sentences = generateSentences();
  const words = sentences.flatMap(async (sentence) => {
      return stringToWords(sentence);
  });

  for await (const word of words) {
    console.log(word);
  }
}

processSentences();

Verkligt användningsfall: Hämta kommentarer för flera blogginlägg och kombinera dem till en enda ström för bearbetning.

async function* fetchBlogPostIds() {
  const blogPostIds = [1, 2, 3]; // Simulera hämtning av blogginläggs-ID:n från ett API
  for (const id of blogPostIds) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield id;
  }
}

async function* fetchCommentsForPost(postId) {
  // Simulera hämtning av kommentarer för ett blogginlägg från ett API
  const comments = [
    { postId: postId, text: `Comment 1 for post ${postId}` },
    { postId: postId, text: `Comment 2 for post ${postId}` }
  ];
  for (const comment of comments) {
    await new Promise(resolve => setTimeout(resolve, 50));
    yield comment;
  }
}

async function processComments() {
  const postIds = fetchBlogPostIds();
  const allComments = postIds.flatMap(async (postId) => {
    return fetchCommentsForPost(postId);
  });

  for await (const comment of allComments) {
    console.log(comment);
  }
}

6. `reduce()`

`reduce()`-hjälpfunktionen tillämpar en funktion mot en ackumulator och varje värde i Async Generatorn (från vänster till höger) för att reducera den till ett enda värde. Detta är användbart för att aggregera data från en asynkron ström.

Syntax:

asyncGenerator.reduce(callback, initialValue)

Exempel: Beräkna summan av tal i en ström.

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

async function processNumbers() {
  const numbers = generateNumbers(1, 5);
  const sum = await numbers.reduce(async (accumulator, num) => {
    await new Promise(resolve => setTimeout(resolve, 100));
    return accumulator + num;
  }, 0);

  console.log('Summa:', sum);
}

processNumbers();

Verkligt användningsfall: Beräkna den genomsnittliga svarstiden för en serie API-anrop.

async function* fetchResponseTimes(apiEndpoints) {
  for (const endpoint of apiEndpoints) {
    const startTime = Date.now();
    try {
      await fetch(endpoint);
      const endTime = Date.now();
      const responseTime = endTime - startTime;
      await new Promise(resolve => setTimeout(resolve, 50));
      yield responseTime;
    } catch (error) {
      console.error(`Fel vid hämtning från ${endpoint}: ${error}`);
      yield 0; // Eller hantera felet på lämpligt sätt
    }
  }
}

async function calculateAverageResponseTime() {
  const apiEndpoints = [
    'https://api.example.com/endpoint1',
    'https://api.example.com/endpoint2',
    'https://api.example.com/endpoint3'
  ];
  const responseTimes = fetchResponseTimes(apiEndpoints);

  let count = 0;
  const sum = await responseTimes.reduce(async (accumulator, time) => {
    count++;
    return accumulator + time;
  }, 0);

  const average = count > 0 ? sum / count : 0;
  console.log(`Genomsnittlig svarstid: ${average} ms`);
}

7. `toArray()`

`toArray()`-hjälpfunktionen konsumerar Async Generatorn och returnerar ett promise som resolverar till en array innehållande alla värden som producerats av generatorn. Detta är användbart när du behöver samla alla värden från strömmen i en enda array för vidare bearbetning.

Syntax:

asyncGenerator.toArray()

Exempel: Samla tal från en ström i en array.

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

async function processNumbers() {
  const numbers = generateNumbers(1, 5);
  const numberArray = await numbers.toArray();

  console.log('Tal-array:', numberArray);
}

processNumbers();

Verkligt användningsfall: Samla alla objekt från ett paginerat API i en enda array för filtrering eller sortering på klientsidan.

async function* fetchAllItems(apiEndpoint) {
    let pageNumber = 1;
    const pageSize = 100;  // Justera baserat på API:ets pagineringsgränser

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

        if (!data || data.length === 0) {
            break; // Ingen mer data
        }

        for (const item of data) {
            await new Promise(resolve => setTimeout(resolve, 50));
            yield item;
        }

        pageNumber++;
    }
}

async function processAllItems() {
    const apiEndpoint = 'https://api.example.com/items';
    const allItems = fetchAllItems(apiEndpoint);
    const itemsArray = await allItems.toArray();

    console.log(`Hämtade ${itemsArray.length} objekt.`);
    // Vidare bearbetning kan utföras på `itemsArray`
}

8. `forEach()`

`forEach()`-hjälpfunktionen exekverar en angiven funktion en gång för varje värde i Async Generatorn. Till skillnad från andra hjälpfunktioner returnerar forEach() inte en ny Async Generator; den används för att utföra sidoeffekter på varje värde.

Syntax:

asyncGenerator.forEach(callback)

Exempel: Logga varje tal i en ström till konsolen.

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

async function processNumbers() {
  const numbers = generateNumbers(1, 5);
  await numbers.forEach(async (num) => {
    await new Promise(resolve => setTimeout(resolve, 100));
    console.log('Tal:', num);
  });
}

processNumbers();

Verkligt användningsfall: Skicka realtidsuppdateringar till ett användargränssnitt medan data bearbetas från en ström.

async function* fetchRealTimeData(dataSource) {
    //Simulera hämtning av realtidsdata (t.ex. aktiekurser).
    const dataStream = [
      { timestamp: new Date(), price: 100 },
      { timestamp: new Date(), price: 101 },
      { timestamp: new Date(), price: 102 }
    ];
    for (const dataPoint of dataStream) {
      await new Promise(resolve => setTimeout(resolve, 500));
      yield dataPoint;
    }
}

async function updateUI() {
  const realTimeData = fetchRealTimeData('stock-api');
  await realTimeData.forEach(async (data) => {
    //Simulera uppdatering av UI
    await new Promise(resolve => setTimeout(resolve, 100));
    console.log(`Uppdaterar UI med data: ${JSON.stringify(data)}`);
    // Kod för att faktiskt uppdatera UI skulle placeras här.
  });
}

Kombinera Async Generator Helpers för komplexa datapipelines

Den verkliga kraften hos Async Generator Helpers kommer från deras förmåga att kedjas samman för att skapa komplexa datapipelines. Detta gör att du kan utföra flera transformationer och operationer på en asynkron ström på ett koncist och läsbart sätt.

Exempel: Filtrera en ström av tal för att endast inkludera jämna tal, sedan kvadrera dem och slutligen ta de första 3 resultaten.

async function* generateNumbers(start) {
  let i = start;
  while (true) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield i++;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1);

  const processedNumbers = numbers
    .filter(async (num) => num % 2 === 0)
    .map(async (num) => num * num)
    .take(3);

  for await (const num of processedNumbers) {
    console.log(num);
  }
}

processNumbers();

Verkligt användningsfall: Hämta användardata, filtrera användare baserat på deras plats, transformera deras data för att endast inkludera relevanta fält och sedan visa de första 10 användarna på en karta.

async function* fetchUsers() {
  // Simulera hämtning av användare från en databas eller API
  const users = [
    { id: 1, name: 'John Doe', location: 'New York', email: 'john.doe@example.com' },
    { id: 2, name: 'Jane Smith', location: 'London', email: 'jane.smith@example.com' },
    { id: 3, name: 'Ken Tan', location: 'Singapore', email: 'ken.tan@example.com' },
    { id: 4, name: 'Alice Jones', location: 'New York', email: 'alice.jones@example.com' },
    { id: 5, name: 'Bob Williams', location: 'London', email: 'bob.williams@example.com' },
    { id: 6, name: 'Siti Rahman', location: 'Singapore', email: 'siti.rahman@example.com' },
    { id: 7, name: 'Ahmed Khan', location: 'Dubai', email: 'ahmed.khan@example.com' },
    { id: 8, name: 'Maria Garcia', location: 'Madrid', email: 'maria.garcia@example.com' },
    { id: 9, name: 'Li Wei', location: 'Shanghai', email: 'li.wei@example.com' },
    { id: 10, name: 'Hans Müller', location: 'Berlin', email: 'hans.muller@example.com' },
    { id: 11, name: 'Emily Chen', location: 'Sydney', email: 'emily.chen@example.com' }
  ];

  for (const user of users) {
    await new Promise(resolve => setTimeout(resolve, 50));
    yield user;
  }
}

async function displayUsersOnMap(location, maxUsers) {
  const users = fetchUsers();

  const usersForMap = users
    .filter(async (user) => user.location === location)
    .map(async (user) => ({
      id: user.id,
      name: user.name,
      location: user.location
    }))
    .take(maxUsers);

  console.log(`Visar upp till ${maxUsers} användare från ${location} på kartan:`);
  for await (const user of usersForMap) {
    console.log(user);
  }
}

// Användningsexempel:
displayUsersOnMap('New York', 2);
displayUsersOnMap('London', 5);

Polyfills och webbläsarstöd

Stödet för Async Generator Helpers kan variera beroende på JavaScript-miljön. Om du behöver stödja äldre webbläsare eller miljöer kan du behöva använda polyfills. En polyfill tillhandahåller den saknade funktionaliteten genom att implementera den i JavaScript. Flera polyfill-bibliotek finns tillgängliga för Async Generator Helpers, som till exempel core-js.

Exempel med core-js:

// Importera nödvändiga polyfills
require('core-js/features/async-iterator/map');
require('core-js/features/async-iterator/filter');
// ... importera andra nödvändiga hjälpfunktioner

Felhantering

När man arbetar med asynkrona operationer är det avgörande att hantera fel korrekt. Med Async Generator Helpers kan felhantering göras med try...catch-block inom de asynkrona funktioner som används i hjälpfunktionerna.

Exempel: Hantera fel vid hämtning av data inom en map()-operation.

async function* fetchData(urls) {
  for (const url of urls) {
    try {
      const response = await fetch(url);
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      const data = await response.json();
      yield data;
    } catch (error) {
      console.error(`Fel vid hämtning av data från ${url}: ${error}`);
      yield null; // Eller hantera felet på lämpligt sätt, t.ex. genom att producera ett felobjekt
    }
  }
}

async function processData() {
  const urls = [
    'https://api.example.com/data1',
    'https://api.example.com/data2',
    'https://api.example.com/data3'
  ];

  const dataStream = fetchData(urls);

  const processedData = dataStream.map(async (data) => {
    if (data === null) {
      return null; // Propagera felet
    }
    // Bearbeta datan
    return data;
  });

  for await (const item of processedData) {
    if (item === null) {
      console.log('Hoppar över objekt på grund av fel');
      continue;
    }
    console.log('Bearbetat objekt:', item);
  }
}

processData();

Bästa praxis och överväganden

• Lazy-utvärdering: Async Generator Helpers utvärderas 'lazy', vilket innebär att de bara bearbetar data när den efterfrågas. Detta kan förbättra prestandan, särskilt när man hanterar stora datamängder.
• Felhantering: Hantera alltid fel korrekt inom de asynkrona funktioner som används i hjälpfunktionerna.
• Polyfills: Använd polyfills vid behov för att stödja äldre webbläsare eller miljöer.
• Läsbarhet: Använd beskrivande variabelnamn och kommentarer för att göra din kod mer läsbar och underhållbar.
• Prestanda: Var medveten om prestandakonsekvenserna av att kedja ihop flera hjälpfunktioner. Även om lazy-utvärdering hjälper, kan överdriven kedjning fortfarande medföra en prestandakostnad.

Slutsats

JavaScript Async Generator Helpers erbjuder ett kraftfullt och elegant sätt att skapa, transformera och hantera asynkrona dataströmmar. Genom att utnyttja dessa hjälpfunktioner kan utvecklare skriva mer koncis, läsbar och underhållbar kod för att hantera komplexa asynkrona operationer. Att förstå grunderna i Async Generators och Iterators, tillsammans med funktionerna hos varje hjälpfunktion, är avgörande för att effektivt kunna använda dessa verktyg i verkliga applikationer. Oavsett om du bygger datapipelines, bearbetar realtidsdata eller hanterar asynkrona API-svar, kan Async Generator Helpers avsevärt förenkla din kod och förbättra dess övergripande effektivitet.