57. Async Iterators

JavaScript: Мозги - Урок “Async Iterators”

Иллюстрация к уроку Async Iterators – это мощный инструмент в JavaScript для работы с асинхронными потоками данных. Они позволяют итерироваться по данным, которые приходят не сразу, а по мере выполнения асинхронных операций, таких как запросы к API или чтение файлов.

Что такое Async Iterators?

Представьте себе обычный итератор: он позволяет последовательно получать значения из коллекции данных. Async Iterator делает то же самое, но каждое “получение” значения может быть асинхронной операцией. Это значит, что итератор может возвращать Promise, который разрешится в следующее значение.

Ключевые элементы Async Iterator:

Symbol.asyncIterator: Символ, определяющий метод, который возвращает Async Iterator.
next(): Метод, который возвращает Promise. Этот Promise разрешается в объект вида { value: any, done: boolean }, где value – следующее значение в последовательности, а done – флаг, указывающий на окончание итерации.

Пример кода

// Асинхронная функция для имитации задержки
async function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// Пример Async Iterable
const asyncIterable = {
  [Symbol.asyncIterator]() {
    let i = 0;
    return {
      async next() {
        await delay(500); // Имитируем асинхронную операцию
        if (i < 3) {
          return { value: i++, done: false };
        } else {
          return { value: undefined, done: true };
        }
      }
    };
  }
};

// Использование Async Iterator с помощью async/await
async function iterate() {
  for await (const value of asyncIterable) {
    console.log(value); // Вывод: 0, 1, 2 (с задержкой в 500мс между каждым значением)
  }
  console.log("Итерация завершена");
}

iterate();

В этом примере asyncIterable является объектом, который предоставляет Async Iterator. Функция iterate использует цикл for await...of, чтобы асинхронно перебирать значения, возвращаемые итератором.

Альтернативный пример с API

async function* fetchUsers(url) {
  let page = 1;
  while (true) {
    const response = await fetch(`${url}?page=${page}`);
    const data = await response.json();

    if (data.length === 0) {
      return; // Завершаем итерацию, если нет данных
    }

    for (const user of data) {
      yield user; // Возвращаем каждого пользователя
    }

    page++;
  }
}

async function displayUsers() {
  const userGenerator = fetchUsers('https://reqres.in/api/users'); // Замените на реальный API

  for await (const user of userGenerator) {
    console.log(user.first_name, user.last_name);
  }
}

displayUsers();

Этот пример показывает, как использовать Async Generator Function (функцию с async function*), чтобы получать данные постранично из API. Функция yield позволяет возвращать значения по мере их получения, не дожидаясь загрузки всех страниц.

Жизненный пример

Async Iterators широко используются в Node.js для работы с потоками данных (streams), особенно при чтении больших файлов или обработке данных в реальном времени. Например, при разработке веб-сервера, который получает данные от клиента частями, Async Iterators позволяют обрабатывать эти данные асинхронно и эффективно. Также, они используются в библиотеках для работы с базами данных, для постраничного получения больших объемов данных. Во фреймворках, таких как React, их можно использовать для стриминговой отрисовки компонентов на сервере.

Ключевые моменты

Async Iterators позволяют работать с асинхронными потоками данных.
Они используют Symbol.asyncIterator и метод next(), возвращающий Promise.
Цикл for await...of предназначен для асинхронной итерации.
Async Generator Functions (с async function*) упрощают создание Async Iterators.
Async Iterators идеально подходят для обработки данных, поступающих постепенно (например, из API или файлов).