JavaScript非同期ジェネレータ

概要: このチュートリアルでは、非同期的に取得されるデータに対して反復処理を行うJavaScript非同期ジェネレータについて学習します。

非同期ジェネレータとは

非同期ジェネレータは通常のジェネレータと似ていますが、その`next()`メソッドはPromiseを返します。非同期ジェネレータを反復処理するには、`for await...of`文を使用します。

JavaScript非同期ジェネレータ入門

通常のジェネレータは、途中で一時停止し、停止したところから再開できる関数です。以下の例を参照してください。

function* sequence(start, end) {
    for (let i = start; i <= end; i++) {
        yield i;
    }
}

let seq = sequence(1, 5);

for (const num of seq) {
    console.log(num);
}
Code language: JavaScript (javascript)

`sequence`は、`start`から`end`までの数値を返すジェネレータです。

非同期ジェネレータは、通常のジェネレータと以下の点が異なります。

• `async`キーワードが`function`キーワードの前に配置されます。
• `yield`は値の代わりに`Promise`を返します。`Promise`は通常、非同期操作のラッパーです。

ジェネレータ`sequence`を非同期ジェネレータ`asyncSequence`に変換する方法を以下に示します。

async function* asyncSequence(start, end) {
    for (let i = start; i <= end; i++) {
        yield new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(i);
            }, 1000);
        });

    }
}Code language: JavaScript (javascript)

非同期操作をシミュレートするためにsetTimeout()を使用したことに注意してください。

非同期ジェネレータ全体を反復処理するには、`for await...of`文を使用します。

`await`キーワードは`async`関数内でのみ使用できるため、コードを非同期IIFEでラップします。

(async () => {
    let seq = asyncSequence(1, 5);

    for await (let num of seq) {
        console.log(num);
    }
})();
Code language: JavaScript (javascript)

このコードは、1秒ごとに1から5までのシーケンスを返します。

1
2
3
4
5
Code language: JavaScript (javascript)

非同期ジェネレータは、データストリームにアクセスし、プログレスバーを使用する場合など、進捗状況を報告したい場合に非常に役立ちます。