Генератори JavaScript: Розширені патерни для асинхронної ітерації та скінченних автоматів

Генератори JavaScript — це потужна функція, яка дозволяє створювати ітератори у більш лаконічний та читабельний спосіб. Хоча їх часто представляють на простих прикладах генерації послідовностей, їхній справжній потенціал розкривається у розширених патернах, таких як асинхронна ітерація та реалізація скінченних автоматів. У цій статті ми заглибимося в ці розширені патерни, надаючи практичні приклади та корисні поради, які допоможуть вам використовувати генератори у ваших проєктах.

Розуміння генераторів JavaScript

Перш ніж занурюватися в розширені патерни, давайте коротко повторимо основи генераторів JavaScript.

Генератор — це особливий тип функції, яку можна призупиняти та відновлювати. Вони визначаються за допомогою синтаксису function* і використовують ключове слово yield для призупинення виконання та повернення значення. Метод next() використовується для відновлення виконання та отримання наступного значення, повернутого через yield.

Базовий приклад

Ось простий приклад генератора, який повертає послідовність чисел:

            
function* numberGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

const generator = numberGenerator();

console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.next()); // { value: 3, done: false }
console.log(generator.next()); // { value: undefined, done: true }

            

              
                Copy
              
            
          

Асинхронна ітерація за допомогою генераторів

Одним з найвагоміших випадків використання генераторів є асинхронна ітерація. Це дозволяє обробляти асинхронні потоки даних у більш послідовний та читабельний спосіб, уникаючи складнощів з колбеками чи промісами (Promises).

Традиційна асинхронна ітерація (проміси)

Розглянемо сценарій, де вам потрібно отримати дані з кількох кінцевих точок API та обробити результати. Без генераторів ви могли б використовувати проміси та async/await ось так:

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

  for (const url of urls) {
    try {
      const response = await fetch(url);
      const data = await response.json();
      console.log(data); // Process the data
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  }
}

fetchData();

            

              
                Copy
              
            
          

Хоча цей підхід є функціональним, він може стати громіздким і складнішим для керування при роботі з більш комплексними асинхронними операціями.

Асинхронна ітерація з генераторами та асинхронними ітераторами

Генератори в поєднанні з асинхронними ітераторами надають більш елегантне рішення. Асинхронний ітератор — це об'єкт, який надає метод next(), що повертає проміс, який вирішується в об'єкт з властивостями value та done. Генератори можуть легко створювати асинхронні ітератори.

            
async function* asyncDataFetcher(urls) {
  for (const url of urls) {
    try {
      const response = await fetch(url);
      const data = await response.json();
      yield data;
    } catch (error) {
      console.error('Error fetching data:', error);
      yield null; // Or handle the error as needed
    }
  }
}

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

  const dataStream = asyncDataFetcher(urls);

  for await (const data of dataStream) {
    if (data) {
      console.log(data); // Process the data
    } else {
      console.log('Error during fetching');
    }
  }
}

processAsyncData();

            

              
                Copy
              
            
          

У цьому прикладі asyncDataFetcher — це асинхронний генератор, який повертає дані, отримані з кожної URL-адреси. Функція processAsyncData використовує цикл for await...of для ітерації по потоку даних, обробляючи кожен елемент по мірі його надходження. Цей підхід призводить до чистішого, більш читабельного коду, який послідовно обробляє асинхронні операції.

Переваги асинхронної ітерації з генераторами

• Покращена читабельність: Код читається як синхронний цикл, що полегшує розуміння потоку виконання.
• Обробка помилок: Обробку помилок можна централізувати всередині функції-генератора.
• Композиційність: Асинхронні генератори можна легко комбінувати та повторно використовувати.
• Керування зворотним тиском: Генератори можна використовувати для реалізації зворотного тиску, запобігаючи перевантаженню споживача виробником.

Приклади з реального життя

• Потокова передача даних: Обробка великих файлів або потоків даних у реальному часі з API. Уявіть обробку великого CSV-файлу від фінансової установи, аналізуючи ціни на акції по мірі їх оновлення.
• Запити до бази даних: Отримання великих наборів даних з бази даних частинами. Наприклад, вибірка записів клієнтів з бази даних, що містить мільйони записів, та їх обробка пакетами для уникнення проблем з пам'яттю.
• Чати в реальному часі: Обробка вхідних повідомлень з websocket-з'єднання. Розглянемо глобальний чат, де повідомлення постійно надходять і відображаються користувачам у різних часових поясах.

Скінченні автомати за допомогою генераторів

Ще одним потужним застосуванням генераторів є реалізація скінченних автоматів. Скінченний автомат — це обчислювальна модель, яка переходить між різними станами на основі вхідних даних. Генератори можна використовувати для визначення переходів між станами у чіткий та лаконічний спосіб.

Традиційна реалізація скінченного автомата

Традиційно скінченні автомати реалізуються за допомогою комбінації змінних, умовних операторів та функцій. Це може призвести до складного коду, який важко підтримувати.

            
const STATE_IDLE = 'IDLE';
const STATE_LOADING = 'LOADING';
const STATE_SUCCESS = 'SUCCESS';
const STATE_ERROR = 'ERROR';

let currentState = STATE_IDLE;
let data = null;
let error = null;

async function fetchDataStateMachine(url) {
  switch (currentState) {
    case STATE_IDLE:
      currentState = STATE_LOADING;
      try {
        const response = await fetch(url);
        data = await response.json();
        currentState = STATE_SUCCESS;
      } catch (e) {
        error = e;
        currentState = STATE_ERROR;
      }
      break;
    case STATE_LOADING:
      // Ignore input while loading
      break;
    case STATE_SUCCESS:
      // Do something with the data
      console.log('Data:', data);
      currentState = STATE_IDLE; // Reset
      break;
    case STATE_ERROR:
      // Handle the error
      console.error('Error:', error);
      currentState = STATE_IDLE; // Reset
      break;
    default:
      console.error('Invalid state');
  }
}

fetchDataStateMachine('https://api.example.com/data');

            

              
                Copy
              
            
          

Цей приклад демонструє простий скінченний автомат для завантаження даних за допомогою оператора switch. Зі зростанням складності скінченного автомата такий підхід стає все важчим для керування.

Скінченні автомати з генераторами

Генератори надають більш елегантний та структурований спосіб реалізації скінченних автоматів. Кожен вираз yield представляє перехід між станами, а функція-генератор інкапсулює логіку станів.

            
function* dataFetchingStateMachine(url) {
  let data = null;
  let error = null;

  try {
    // STATE: LOADING
    const response = yield fetch(url);
    data = yield response.json();

    // STATE: SUCCESS
    yield data;
  } catch (e) {
    // STATE: ERROR
    error = e;
    yield error;
  }

  // STATE: IDLE (implicitly reached after SUCCESS or ERROR)
  return;
}

async function runStateMachine() {
  const stateMachine = dataFetchingStateMachine('https://api.example.com/data');

  let result = stateMachine.next();

  while (!result.done) {
    const value = result.value;

    if (value instanceof Promise) {
      // Handle asynchronous operations
      try {
        const resolvedValue = await value;
        result = stateMachine.next(resolvedValue); // Pass the resolved value back to the generator
      } catch (e) {
        result = stateMachine.throw(e); // Throw the error back to the generator
      }
    } else if (value instanceof Error) {
      // Handle errors
      console.error('Error:', value);
      result = stateMachine.next();
    } else {
      // Handle successful data
      console.log('Data:', value);
      result = stateMachine.next();
    }
  }
}

runStateMachine();

            

              
                Copy
              
            
          

У цьому прикладі генератор dataFetchingStateMachine визначає стани: ЗАВАНТАЖЕННЯ (представлений yield fetch(url)), УСПІХ (представлений yield data) та ПОМИЛКА (представлений yield error). Функція runStateMachine керує скінченним автоматом, обробляючи асинхронні операції та умови помилок. Цей підхід робить переходи між станами явними та легшими для розуміння.

Переваги скінченних автоматів з генераторами

• Покращена читабельність: Код чітко представляє переходи між станами та логіку, пов'язану з кожним станом.
• Інкапсуляція: Логіка скінченного автомата інкапсульована всередині функції-генератора.
• Тестованість: Скінченний автомат можна легко тестувати, проходячи по кроках генератора та перевіряючи очікувані переходи між станами.
• Підтримуваність: Зміни в скінченному автоматі локалізовані у функції-генераторі, що полегшує його підтримку та розширення.

Приклади з реального життя

• Життєвий цикл UI-компонента: Керування різними станами UI-компонента (наприклад, завантаження, відображення даних, помилка). Розглянемо компонент карти в додатку для подорожей, який переходить від завантаження даних карти, відображення карти з маркерами, обробки помилок, якщо дані карти не завантажилися, до взаємодії з користувачем та подальшого уточнення карти.
• Автоматизація робочих процесів: Реалізація складних робочих процесів з кількома кроками та залежностями. Уявіть міжнародний процес доставки: очікування підтвердження оплати, підготовка відправлення до митниці, митне оформлення в країні походження, доставка, митне оформлення в країні призначення, вручення, завершення. Кожен з цих кроків представляє собою стан.
• Розробка ігор: Керування поведінкою ігрових сутностей на основі їх поточного стану (наприклад, бездіяльність, рух, атака). Подумайте про ШІ-ворога у глобальній багатокористувацькій онлайн-грі.

Обробка помилок у генераторах

Обробка помилок є надзвичайно важливою при роботі з генераторами, особливо в асинхронних сценаріях. Існує два основних способи обробки помилок:

1. Блоки Try...Catch: Використовуйте блоки try...catch всередині функції-генератора для обробки помилок, що виникають під час виконання.
2. Метод throw(): Використовуйте метод throw() об'єкта-генератора, щоб вкинути помилку в генератор у точці, де він наразі призупинений.

Попередні приклади вже демонстрували обробку помилок за допомогою try...catch. Давайте розглянемо метод throw().

            
function* errorGenerator() {
  try {
    yield 1;
    yield 2;
    yield 3;
  } catch (error) {
    console.error('Error caught:', error);
  }
}

const generator = errorGenerator();

console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.throw(new Error('Something went wrong'))); // Error caught: Error: Something went wrong
console.log(generator.next()); // { value: undefined, done: true }

            

              
                Copy
              
            
          

У цьому прикладі метод throw() вкидає помилку в генератор, яку перехоплює блок catch. Це дозволяє обробляти помилки, що виникають поза функцією-генератором.

Найкращі практики використання генераторів

• Використовуйте описові імена: Обирайте описові імена для ваших функцій-генераторів та значень, що повертаються через yield, для покращення читабельності коду.
• Зберігайте фокус генераторів: Проєктуйте ваші генератори так, щоб вони виконували конкретне завдання або керували певним станом.
• Витончено обробляйте помилки: Реалізуйте надійну обробку помилок, щоб запобігти непередбачуваній поведінці.
• Документуйте ваш код: Додавайте коментарі для пояснення призначення кожного виразу yield та переходу між станами.
• Враховуйте продуктивність: Хоча генератори пропонують багато переваг, пам'ятайте про їхній вплив на продуктивність, особливо в критично важливих до продуктивності додатках.

Висновок

Генератори JavaScript — це універсальний інструмент для створення складних додатків. Опанувавши розширені патерни, такі як асинхронна ітерація та реалізація скінченних автоматів, ви зможете писати чистіший, більш підтримуваний та ефективніший код. Використовуйте генератори у вашому наступному проєкті та розкрийте їхній повний потенціал.

Пам'ятайте, що завжди слід враховувати конкретні вимоги вашого проєкту та обирати відповідний патерн для поставленого завдання. З практикою та експериментами ви станете вправними у використанні генераторів для вирішення широкого кола програмних завдань.