【JavaScript】 非同期イテレータと非同期ジェネレーターについて理解しよう

通常のイテレータの例

function myIterator(){
    return {
        count:0,
        next() { //   next:function(){ の短縮系
            return this.count < 3
                ? { value : this.count++ , done:false}
                : {  done:true };
        }
    }
}
function func1(){

    let iterator = myIterator();
    let result = iterator.next();

    while( !result.done ){
        console.log( result.value );
        result = iterator.next();
    }
}
func1();

非同期イテレータの例

window.addEventListener( "DOMContentLoaded" , ()=> {

    function myAsyncIterator(){
        return {
            count:0,
            next() { //   next:function(){ の短縮系

                return new Promise( resolve =>{
                    if( this.count >= 3 ) resolve( { done: true } );
                    else{
                        const count = this.count ++;
                        const btn = document.getElementById("btn");

                        btn.addEventListener("click",function clickEvent(){
                            btn.removeEventListener("click",clickEvent);
                            resolve( { value : count , done: false} );
                        });
                    }
                });
            }
        }
    }
    async function func2(){

        let asyncIterator = myAsyncIterator();
        let result = await asyncIterator.next();

        while( !result.done ){
            console.log( result.value );
            result = await asyncIterator.next();
        }
    }
    func2();
});

HTML

<button id="btn">click</button>

click

通常のイテラブルなオブジェクト

const obj1 ={

    [Symbol.iterator]:myIterator,

};
function func1(){
    for  ( let data of obj1){
        console.log( data );
    }
}
func1();

非同期のイテラブルなオブジェクト

const obj2 ={
    data1:"A",
    data2:"B",
    data3:"C",

    [Symbol.asyncIterator]:myAsyncIterator,

};
async function func2(){
    for await ( let data of obj2){
        console.log( data );
    }
}
func2();

async function* 関数名(){ }

非同期ジェネレーターの動作確認

async function* asyncGenerator(){
    yield 1;
}
function fun1(){
    const g = asyncGenerator();
    g.next().then( e=>console.log(e) ); // Object { value: 1, done: false }
    g.next().then( e=>console.log(e) ); // Object { value: undefined, done: true }
}
fun1();

ブラウザ上でボタンを押されるまで待つ非同期ジェネレーター

function btnWait(n){

    return new Promise( resolve => {
        const btn = document.getElementById("btn");
        
        btn.addEventListener("click",function clickEvent(){
            btn.removeEventListener("click",clickEvent);
            resolve(n);
        });
    });
}

async function* asyncGenerator(){
    yield btnWait(1);
}
function fun1(){
    const g = asyncGenerator();
    g.next().then( e=>console.log(e) );
    g.next().then( e=>console.log(e) );
}
fun1();

click

{ value: 1, done: false }
{ value: undefined, done: true }

非同期ジェネレーターを非同期のイテラブルなオブジェクトに適用

const obj = {
    [Symbol.asyncIterator]:asyncGenerator,
}
async function fun1(){
    for await( let data of obj){
        console.log( data ); // 結果: 1
    }
}
fun1();