Помощници за асинхронни генератори в JavaScript: Овладяване на създаването и управлението на потоци

Асинхронното програмиране в JavaScript се разви значително през годините. С въвеждането на асинхронни генератори и асинхронни итератори, разработчиците получиха мощни инструменти за обработка на потоци от асинхронни данни. Сега помощниците за асинхронни генератори в JavaScript допълнително разширяват тези възможности, предоставяйки по-рационализиран и изразителен начин за създаване, трансформиране и управление на асинхронни потоци от данни. Това ръководство изследва основите на помощниците за асинхронни генератори, разглежда техните функционалности и демонстрира практическите им приложения с ясни примери.

Разбиране на асинхронните генератори и итератори

Преди да се потопим в помощниците за асинхронни генератори, е изключително важно да разберем основните концепции на асинхронните генератори и асинхронните итератори.

Асинхронни генератори

Асинхронният генератор е функция, която може да бъде поставяна на пауза и възобновявана, като асинхронно предоставя (yields) стойности. Тя ви позволява да генерирате последователност от стойности с течение на времето, без да блокирате основната нишка. Асинхронните генератори се дефинират чрез синтаксиса async function*.

Пример:

async function* generateSequence(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 500)); // Симулиране на асинхронна операция
    yield i;
  }
}

// Употреба
const sequence = generateSequence(1, 5);

Асинхронни итератори

Асинхронният итератор е обект, който предоставя метод next(), връщащ promise, който се разрешава (resolves) до обект, съдържащ следващата стойност в последователността и свойство done, указващо дали последователността е изчерпана. Асинхронните итератори се консумират чрез цикли for await...of.

Пример:

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();

Представяне на помощниците за асинхронни генератори

Помощниците за асинхронни генератори са набор от методи, които разширяват функционалността на прототипите на асинхронните генератори. Те предоставят удобни начини за манипулиране на асинхронни потоци от данни, правейки кода по-четим и лесен за поддръжка. Тези помощници работят „мързеливо“ (lazily), което означава, че обработват данни само когато е необходимо, което може да подобри производителността.

Следните помощници за асинхронни генератори са често достъпни (в зависимост от JavaScript средата и полифилите):

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

Подробно изследване на помощниците за асинхронни генератори

1. `map()`

Помощникът map() трансформира всяка стойност в асинхронната последователност, като прилага предоставена функция. Той връща нов асинхронен генератор, който предоставя (yields) трансформираните стойности.

Синтаксис:

asyncGenerator.map(callback)

Пример: Преобразуване на поток от числа в техните квадрати.

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)); // Симулиране на асинхронна операция
    return num * num;
  });

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

processNumbers();

Реален случай на употреба: Представете си извличане на потребителски данни от няколко API и нуждата от трансформиране на данните в последователен формат. map() може да се използва за асинхронно прилагане на трансформираща функция към всеки потребителски обект.

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) => {
    // Нормализиране на формата на потребителските данни
    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() създава нов асинхронен генератор, който предоставя само стойностите от оригиналната последователност, които удовлетворяват предоставено условие. Той ви позволява избирателно да включвате стойности в резултантния поток.

Синтаксис:

asyncGenerator.filter(callback)

Пример: Филтриране на поток от числа, за да се включат само четните.

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();

Реален случай на употреба: Обработка на поток от лог записи и филтриране на записите въз основа на тяхното ниво на сериозност. Например, обработка само на грешки и предупреждения.

async function* readLogFile(filePath) {
  // Симулиране на асинхронно четене на лог файл ред по ред
  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() създава нов асинхронен генератор, който предоставя само първите n стойности от оригиналната последователност. Той е полезен за ограничаване на броя на обработваните елементи от потенциално безкраен или много голям поток.

Синтаксис:

asyncGenerator.take(n)

Пример: Вземане на първите 3 числа от поток от числа.

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();

Реален случай на употреба: Показване на първите 5 резултата от търсене от асинхронен API за търсене.

async function* search(query) {
  // Симулиране на извличане на резултати от търсене от 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() създава нов асинхронен генератор, който пропуска първите n стойности от оригиналната последователност и предоставя останалите. Той е обратното на take() и е полезен за игнориране на началните части на поток.

Синтаксис:

asyncGenerator.drop(n)

Пример: Пропускане на първите 2 числа от поток от числа.

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();

Реален случай на употреба: Пагиниране през голям набор от данни, извлечен от API, като се пропускат вече показаните резултати.

async function* fetchData(url, pageSize, pageNumber) {
  const offset = (pageNumber - 1) * pageSize;
  // Симулиране на извличане на данни с отместване
  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);  // пропускане на елементи от предишни страници

  const results = page.take(pageSize);


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

// Примерна употреба
displayPage(2);

5. `flatMap()`

Помощникът flatMap() трансформира всяка стойност в асинхронната последователност, като прилага функция, която връща асинхронна итерируема колекция (Async Iterable). След това той „сплесква“ (flattens) резултантната асинхронна итерируема колекция в един асинхронен генератор. Това е полезно за трансформиране на всяка стойност в поток от стойности и след това комбиниране на тези потоци.

Синтаксис:

asyncGenerator.flatMap(callback)

Пример: Преобразуване на поток от изречения в поток от думи.

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();

Реален случай на употреба: Извличане на коментари за няколко блог публикации и комбинирането им в един поток за обработка.

async function* fetchBlogPostIds() {
  const blogPostIds = [1, 2, 3]; // Симулиране на извличане на ID-та на блог публикации от API
  for (const id of blogPostIds) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield id;
  }
}

async function* fetchCommentsForPost(postId) {
  // Симулиране на извличане на коментари за блог публикация от 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() прилага функция към акумулатор и всяка стойност на асинхронния генератор (отляво надясно), за да го сведе до една стойност. Това е полезно за агрегиране на данни от асинхронен поток.

Синтаксис:

asyncGenerator.reduce(callback, initialValue)

Пример: Изчисляване на сумата на числата в поток.

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('Sum:', sum);
}

processNumbers();

Реален случай на употреба: Изчисляване на средното време за отговор на поредица от API извиквания.

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(`Error fetching ${endpoint}: ${error}`);
      yield 0; // Или обработете грешката по подходящ начин
    }
  }
}

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(`Average response time: ${average} ms`);
}

7. `toArray()`

Помощникът toArray() консумира асинхронния генератор и връща promise, който се разрешава до масив, съдържащ всички стойности, предоставени от генератора. Това е полезно, когато трябва да съберете всички стойности от потока в един масив за по-нататъшна обработка.

Синтаксис:

asyncGenerator.toArray()

Пример: Събиране на числа от поток в масив.

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('Number Array:', numberArray);
}

processNumbers();

Реален случай на употреба: Събиране на всички елементи от пагиниран API в един масив за филтриране или сортиране от страна на клиента.

async function* fetchAllItems(apiEndpoint) {
    let pageNumber = 1;
    const pageSize = 100;  // Коригирайте според лимитите за пагинация на API

    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; // Няма повече данни
        }

        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(`Fetched ${itemsArray.length} items.`);
    // По-нататъшна обработка може да се извърши върху `itemsArray`
}

8. `forEach()`

Помощникът forEach() изпълнява предоставена функция веднъж за всяка стойност в асинхронния генератор. За разлика от другите помощници, forEach() не връща нов асинхронен генератор; той се използва за извършване на странични ефекти върху всяка стойност.

Синтаксис:

asyncGenerator.forEach(callback)

Пример: Записване на всяко число от поток в конзолата.

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('Number:', num);
  });
}

processNumbers();

Реален случай на употреба: Изпращане на актуализации в реално време до потребителски интерфейс, докато данните се обработват от поток.

async function* fetchRealTimeData(dataSource) {
    // Симулиране на извличане на данни в реално време (напр. цени на акции).
    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) => {
    // Симулиране на актуализация на потребителския интерфейс
    await new Promise(resolve => setTimeout(resolve, 100));
    console.log(`Updating UI with data: ${JSON.stringify(data)}`);
    // Тук би се намирал кодът за реална актуализация на потребителския интерфейс.
  });
}

Комбиниране на помощници за асинхронни генератори за сложни поточни линии за данни

Истинската сила на помощниците за асинхронни генератори идва от способността им да бъдат навързвани, за да се създават сложни поточни линии за данни. Това ви позволява да извършвате множество трансформации и операции върху асинхронен поток по сбит и четим начин.

Пример: Филтриране на поток от числа, за да се включат само четните, след това повдигането им на квадрат и накрая вземането на първите 3 резултата.

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();

Реален случай на употреба: Извличане на потребителски данни, филтриране на потребителите въз основа на тяхното местоположение, трансформиране на данните им, за да се включат само релевантни полета, и след това показване на първите 10 потребители на карта.

async function* fetchUsers() {
  // Симулиране на извличане на потребители от база данни или 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(`Displaying up to ${maxUsers} users from ${location} on the map:`);
  for await (const user of usersForMap) {
    console.log(user);
  }
}

// Примери за употреба:
displayUsersOnMap('New York', 2);
displayUsersOnMap('London', 5);

Полифили и поддръжка от браузъри

Поддръжката за помощниците за асинхронни генератори може да варира в зависимост от JavaScript средата. Ако трябва да поддържате по-стари браузъри или среди, може да се наложи да използвате полифили (polyfills). Полифилът осигурява липсващата функционалност, като я имплементира в JavaScript. Налични са няколко библиотеки с полифили за помощниците за асинхронни генератори, като например core-js.

Пример с core-js:

// Импортиране на необходимите полифили
require('core-js/features/async-iterator/map');
require('core-js/features/async-iterator/filter');
// ... импортирайте други необходими помощници

Обработка на грешки

При работа с асинхронни операции е изключително важно да се обработват грешките правилно. С помощниците за асинхронни генератори, обработката на грешки може да се извърши с помощта на блокове try...catch в рамките на асинхронните функции, използвани в помощниците.

Пример: Обработка на грешки при извличане на данни в рамките на операция map().

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(`Error fetching data from ${url}: ${error}`);
      yield null; // Или обработете грешката по подходящ начин, напр. като предоставите обект за грешка
    }
  }
}

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; // Разпространяване на грешката
    }
    // Обработка на данните
    return data;
  });

  for await (const item of processedData) {
    if (item === null) {
      console.log('Skipping item due to error');
      continue;
    }
    console.log('Processed Item:', item);
  }
}

processData();

Добри практики и съображения

• Мързеливо изчисляване (Lazy Evaluation): Помощниците за асинхронни генератори се изчисляват „мързеливо“, което означава, че обработват данни само когато бъдат поискани. Това може да подобри производителността, особено при работа с големи набори от данни.
• Обработка на грешки: Винаги обработвайте грешките правилно в рамките на асинхронните функции, използвани в помощниците.
• Полифили: Използвайте полифили, когато е необходимо, за да поддържате по-стари браузъри или среди.
• Четимост: Използвайте описателни имена на променливи и коментари, за да направите кода си по-четим и лесен за поддръжка.
• Производителност: Бъдете наясно с последиците за производителността от навързването на множество помощници. Макар че „мързеливостта“ помага, прекомерното навързване все пак може да доведе до допълнителни разходи.

Заключение

Помощниците за асинхронни генератори в JavaScript предоставят мощен и елегантен начин за създаване, трансформиране и управление на асинхронни потоци от данни. Като използват тези помощници, разработчиците могат да пишат по-сбит, четим и лесен за поддръжка код за обработка на сложни асинхронни операции. Разбирането на основите на асинхронните генератори и итератори, заедно с функционалностите на всеки помощник, е от съществено значение за ефективното използване на тези инструменти в реални приложения. Независимо дали изграждате поточни линии за данни, обработвате данни в реално време или управлявате асинхронни отговори от API, помощниците за асинхронни генератори могат значително да опростят вашия код и да подобрят общата му ефективност.