Асинхронные итераторы — for await...of и асинхронные генераторы
Используйте асинхронные генераторы и for await...of для получения значений, поступающих со временем. Изучите Symbol.asyncIterator и простые асинхронные конвейеры
«Асинхронные итераторы — for await...of и асинхронные генераторы» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 3 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 3 уроков всего.
Почему нужна асинхронная итерация?
Цель: обрабатывать значения, которые могут появиться позже.
- Циклы for await...of перебирают асинхронные итерируемые объекты
- async function* создаёт асинхронные генераторы
- Symbol.asyncIterator помечает объект как асинхронно итерируемый
- Небольшой пример асинхронного map
async function* и for await...of
Асинхронный генератор (async function*) выдаёт значения, которые потребляет for await...of.
// Use an async generator to yield values (could be delayed in real apps)
(async function () {
async function* countAsync(n) {
for (let i = 1; i <= n; i = i + 1) {
// In real code you could await a delay or I/O here
yield i;
}
}
for await (const x of countAsync(3)) {
console.log("async value:", x);
}
})();
Ручной асинхронный вызов next()
next() у асинхронного итератора возвращает промис, разрешающийся в { value, done }.
// Drive an async iterator manually with await it.next()
(async function () {
async function* two() {
yield "A";
yield "B";
}
const it = two();
console.log(await it.next()); // { value: "A", done: false }
console.log(await it.next()); // { value: "B", done: false }
console.log(await it.next()); // { value: undefined, done: true }
})();
Symbol.asyncIterator у объектов
Добавьте [Symbol.asyncIterator](), возвращающий асинхронный итератор, чтобы объект работал с for await...of.
// Mark a plain object as async-iterable via Symbol.asyncIterator
(async function () {
const AsyncTwice = {
from: function (a, b) {
return {
a: a, b: b,
[Symbol.asyncIterator]: async function () {
let step = 0;
return {
next: async function () {
if (step === 0) { step = 1; return { value: a, done: false }; }
if (step === 1) { step = 2; return { value: b, done: false }; }
return { value: undefined, done: true };
}
};
}
};
}
};
for await (const v of AsyncTwice.from("X", "Y")) {
console.log("from object:", v);
}
})();
Асинхронный конвейер map
Объединяйте асинхронные генераторы, чтобы строить небольшие конвейеры, ожидающие выполнения каждого шага.
// Async map: transform values lazily while awaiting work
(async function () {
async function* countAsync(n) {
for (let i = 1; i <= n; i = i + 1) {
yield i;
}
}
async function* asyncMap(iterable, fn) {
for await (const v of iterable) {
// fn can be async; await its result
const out = await fn(v);
yield out;
}
}
const doubled = asyncMap(countAsync(4), async function (x) {
// simulate async transform (no real delay for demo)
return x * 2;
});
const collected = [];
for await (const v of doubled) {
collected.push(v);
}
console.log("doubled async:", collected);
})();
Хорошие привычки
Советы:
- for await...of требует асинхронный итерируемый объект (Symbol.asyncIterator).
- Используйте async function*, чтобы легко определять асинхронные генераторы.
- Каждый вызов next() ожидается; делайте работу небольшой, чтобы приложение оставалось отзывчивым.
Викторина об основах асинхронной итерации
Быстрая проверка: требование к асинхронному итерируемому объекту.
Итоги
Итоги: используйте async function* и yield для создания асинхронных генераторов. Перебирайте значения с помощью for await...of или вручную ожидайте next(). Стройте небольшие асинхронные конвейеры с помощью вспомогательных генераторов.
Часто задаваемые вопросы
Урок «Асинхронные итераторы — for await...of и асинхронные генераторы» бесплатный?
Да — полный текст урока «Асинхронные итераторы — for await...of и асинхронные генераторы» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 3 уроков всего.
Чему я научусь в уроке «Асинхронные итераторы — for await...of и асинхронные генераторы»?
Используйте асинхронные генераторы и for await...of для получения значений, поступающих со временем. Изучите Symbol.asyncIterator и простые асинхронные конвейеры Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 3.
Сколько времени занимает урок «Асинхронные итераторы — for await...of и асинхронные генераторы»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Итерируемый протокол и for...of
- Функции-генераторы, yield и небольшие конвейеры
- Асинхронные итераторы — for await...of и асинхронные генераторы