Widely available すべての主要ブラウザで対応済み。安心して使用可能。

Async generators

AsyncGenerator オブジェクトは非同期ジェネレーター関数から返されるもので、非同期反復可能プロトコルと非同期イテレータープロトコルの両方を満たすものです。

非同期ジェネレーターメソッドは、常に Promise オブジェクトを生成します。

AsyncGenerator は隠しクラスの AsyncIterator のサブクラスです。

言語コアES2018

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
AsyncGenerator
63
79
55
12
63
12
AsyncGenerator.next

next() メソッドは、シーケンス内の次の値を返します。
63
79
55
12
63
12
AsyncGenerator.return

return() は AsyncGenerator インスタンスのメソッドで、あたかも return 文がジェネレーター本体の中の停止中の位置に挿入されたかのように動作し、ジェネレーターを終了して、try...finally ブロックと組み合わせた際に、ジェネレーターが任意のクリーンアップタスクを実行できるようにします。
63
79
55
12
63
12
AsyncGenerator.throw

throw() は AsyncGenerator インスタンスのメソッドで、あたかも throw 文がジェネレーター本体の中の停止中の位置に挿入されたかのように動作し、エラー状態をジェネレーターに通知して、エラーを処理するか、クリーンアップを実行してそれ自身を閉じることができます。
63
79
55
12
63
12
AsyncGeneratorFunction

AsyncGeneratorFunction オブジェクトは、非同期ジェネレーター関数のメソッドを提供します。 JavaScript では、すべての非同期ジェネレータ関数は実際には AsyncGeneratorFunction オブジェクトです。
63
79
55
12
63
12
AsyncGeneratorFunction.AsyncGeneratorFunction

AsyncGeneratorFunction() コンストラクターは AsyncGeneratorFunction オブジェクトを生成します。
63
79
55
12
63
12
文法
async generator methods

非同期ジェネレーター・メソッド
63
79
57
12
63
12
演算子
async generator function

非同期関数*`式
63
79
57
12
63
12
ステートメント
async generator function

非同期関数*`ステートメント
63
79
57
12
63
12
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT 
async function* fetchPages(url) {
  let page = 1;
  while (true) {
    const res = await fetch(`${url}?page=${page}`);
    const data = await res.json();
    if (data.length === 0) return;
    yield data;
    page++;
  }
}

for await (const page of fetchPages('/api/items')) {
  console.log(page);
}

ライブデモ

async function* の基本

async function* で非同期ジェネレータを定義。await と yield を組み合わせ可能。

プレビュー全画面表示

ページネーション風データ取得

ページごとに非同期でデータを取得して逐次出力するパターン。

プレビュー全画面表示

通常 generator との違い

yield する値が同期/非同期、消費側が for...of / for await...of で異なる。

プレビュー全画面表示

実務での使いどころ

  • Async generators の活用

    AsyncGenerator オブジェクトは非同期ジェネレーター関数から返されるもので、非同期反復可能プロトコルと非同期イテレータープロトコルの両方を満たすものです。

注意点

  • 特になし。すべての主要ブラウザで安定して動作する。

アクセシビリティ

  • JavaScript による動的更新時は、aria-live リージョンで変更をスクリーンリーダーに通知する。

参考リンク