coffeescript async await 구현

in kr •  7 years ago 

Promise 에서 직렬로 순차대로 실행하는 것은 쉽지 않다.
이런 경우엔 coroutine이 적절한데 async/await으로 할 수 있다.
javascript에 비해 coffeescript 2.0은 await 지원이 깔끔한 편이다.

sleep = (ms) ->
  new Promise (resolve) ->
    setTimeout resolve, ms
say = (text) -> console.log text
countdown = (seconds) ->
  for i in [seconds..1]
    say i
    await sleep 1000
  say "Blast off"

countdown 3

똑같이 ECMA7으로 구현하면

sleep = ms =>
  new Promise(resolve => 
    setTimeout(resolve, ms)
  )
say = text => console.log(text);
countdown = async seconds => {
  for(let i=seconds; i> 0; i--) {
    say(i);
    await sleep(1000);
  }
  say("Blast off");
}
countdown(3);

이와 같다.

병렬로 쏴보내는 건 Promise.all 로 직렬은 Async 를 쓰면 편하다.

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

최근에 async 를 쓸일이 있었는데, 꽤 편리합니다.
async 는 generator 로 변환된다고 하는데, 그 과정이 이해가 안되는 것이 문제군요... ^^

실제로 babel 태워보면 generator(function*) 으로 변환하더군요.

function _asyncToGenerator(fn) {
    return function() {
        var gen = fn.apply(this, arguments);
        return new Promise(function(resolve, reject) {
            function step(key, arg) {
                try {
                    var info = gen[key](arg);
                    var value = info.value;
                } catch (error) {
                    reject(error);
                    return;
                }
                if (info.done) {
                    resolve(value);
                } else {
                    return Promise.resolve(value).then(function(value) {
                        step("next", value);
                    }, function(err) {
                        step("throw", err);
                    });
                }
            }
            return step("next");
        });
    };
}

요런 녀석이 내부적으로 step 이란 놈을 재귀호출 하고 있습니다.
저 step 으로 돌 놈들 즉, _asyncToGenerator 인자의 길이 만큼 돌텐데 저래도 메모리가 괜찮나 모르겠습니다;;

https://babeljs.io/repl/#?babili=false&browsers=&build=&builtIns=false&code_lz=MYewdgzgLgBBA2BTRAHGBeGBbCGB8AUDDGIgO4wAKATiFgJYSIAU1iEI8AbovjEcTiIoAFXpZEIAK5RW7TjwA02CAEoB60JFgQAhgE8MMKIgAesdHhhaOSAHTwQAc2YnzqgNwEbsUFLBQACYgZGBGuhD6YMBCWoG4ljAA3gIAZiDUzEiw9OhMcRAeMPRWAAxF9AC0larJAsR6-sz0nvUwumS69DpIqMwAjKVDrcQAvgKNzABEAELwEbAgqalTreN-AcGhzADMnkA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=true&fileSize=false&lineWrap=false&presets=es2017%2Creact%2Cstage-2&prettier=false&targets=&version=6.26.0&envVersion=