제너레이터와 프로미스, Generator와 Promise

https://davidwalsh.name/async-generators

Going Async With ES6 Generators

Generator와 Promise가 같이 쓰이면 갑자기 가슴이 답답해지면서 머리가 일을 안하겠다고 해서, 찾다보니 설명이 정말 잘되어있는 글을 드디어 만났다!

 

function request(url) {
    // this is where we're hiding the asynchronicity,
    // away from the main code of our generator
    // `it.next(..)` is the generator's iterator-resume
    // call
    makeAjaxCall( url, function(response){
        it.next( response );
    } );
    // Note: nothing returned here!
}

function *main() {
    var result1 = yield request( "http://some.url.1" );
    var data = JSON.parse( result1 );

    var result2 = yield request( "http://some.url.2?id=" + data.id );
    var resp = JSON.parse( result2 );
    console.log( "The value you asked for: " + resp.value );
}

var it = main();
it.next(); // get it all started

이것만 이해하면 되는 것이었다. 

 

1. main이라는 generator 함수를 그냥 생성한다. 

2. 이 함수는 it.next()를 통해서 처음 실행이된다. 

3. 첫번째 만나는 yield에서 반환하는 값을 request("어떤 url")이다. 이 함수는 undefined를 반환하는데, 이 내부에서는 ajax요청이 일어났다. 하지만 어쨌거나, request함수자체는 undefined를 반환하고 끝이 났다. 

4. ajax요청이 끝나고나면 요청의 콜백함수내에서 it.next(response)가 실행되면서 yield 의 좌측에 있는 변수에 넘겨준 response가 할당되고 그다음 yield를 만날때까지 실행이된다. 

5. yield를 다시만나면 request는 다시 undefined를 반환하고 끝냈지만, ajax콜의 콜백함수는 다시 response를 it.next에 넘겨서 main 제너레이터가 다시 실행이 된다. 

 

제너레이터는 next메서드를 통해서는 함수내에 상태를 보내줄 수가 있고, yield를 통해서는 제너레이터 안에서 일어난 상태를 반환해줄 수 있게된다.