JavaScript Symbol.asyncIterator — асинхронний перебір for await

Symbol.asyncIterator робить об'єкт перебірним у for await...of — коли кожен наступний елемент треба дочекатись.

правити

Загальний опис

Звичайний ітератор віддає значення миттєво. А якщо кожне значення — це запит до сервера? Саме для цього й існує асинхронний протокол.

Найкорисніше застосування — посторінкове завантаження. Ти пишеш звичайний цикл for await (const item of api.items()), а всередині нього прозоро ходять запити за наступними сторінками. Логіка пагінації ховається в ітераторі, а код, що її споживає, лишається плоским.

Його ж має потік відповіді fetch — тіло відповіді можна читати шматками саме так.

правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	63	57	11.1	50	79	—

Підтримка: мобільні переглядачі

Переглядач
	63	63	57	11.3

Підтримка: серверні переглядачі

Переглядач
	10.0.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

const api = {
    async *[Symbol.asyncIterator]() {
        // у житті сторінки приходять із fetch
        const pages = [
            [{ title: 'Перший' }, { title: 'Другий' }],
            [{ title: 'Третій' }],
            [],
        ];
        let page = 0;

        while (true) {
            const items = pages[page] || [];

            if (items.length === 0) {
                return;
            }

            yield* items;
            page++;
        }
    },
};

(async () => {
    // пагінації не видно — просто цикл
    for await (const item of api) {
        console.log(item.title);
    }
})();