Promise,

async / await

function blocking_wait(sec, callback) {
    var start_time = +new Date;
    while (+new Date < (start_time + sec * 1000));
    callback();
}
console.log('1초 기다려 볼까요?');
blocking_wait(1, function () {
    console.log('1초가 지났어요!');
});

function non_blocking_wait(sec, callback) {
    setTimeout(callback, sec * 1000);
}
console.log('1초 기다려 볼까요?');
non_blocking_wait(1, function () {
    console.log('1초가 지났어요!');
});

blocking

non-blocking

차이점

• blocking_wait이 돌아가는 동안은
  while 루프가 실행흐름을 잡고 놓아주지 않기 때문에
  다른 이벤트 루프가 처리될 수 없음.
• 반면 non_blocking_wait이 돌아가는 동안은
  사용자가 페이지를 스크롤할 수도, 링크를 클릭할 수도 있다! 

블로킹 코드를

작성하는 이유는

콜백지옥 때문

callback hell

blocking에서는

다음에 실행될 코드를

같은 블럭 안에서 찾을 수 있다.

non-blocking에서는

다음에 실행될 코드를

콜백으로 넘겨야 하기 때문에

들여쓰기가 깊어지게 되어,

코드가 한 눈에 들어오지 않는다.

// heaven?
blocking_wait(1);
console.log('1초가 지났어요!');
blocking_wait(1);
console.log('2초가 지났어요!');
blocking_wait(1);
console.log('3초가 지났어요!');


// hell!
non_blocking_wait(1, function () {
    console.log('1초가 지났어요!');
    non_blocking_wait(1, function () {
        console.log('2초가 지났어요!');
        non_blocking_wait(1, function () {
            console.log('3초가 지났어요!');
        });
    });
});

Promise

미래에 존재할 거라고 예상되는 값...

을 나타내는 값!

then, catch 체인을 활용하면

들여쓰기가 깊어지지 않음!

function promise_wait(sec) {
    return new Promise(
        function (resolve, reject) {
            setTimeout(resolve, sec * 1000);
        }
    );
}


promise_wait(1).then(function () {
    console.log('1초가 지났어요!');
    return promise_wait(1);
}).then(function () {
    console.log('2초가 지났어요!');
    return promise_wait(1);
}).then(function () {
    console.log('3초가 지났어요!');
});

Promise... 완벽한가?

try...catch 문을 사용할 수 없음

(catch체인을 활용해야 함)

오른쪽과 같은 코드를

작성하기 까다로움

// 프로미스만 사용하면
// 이 것처럼 작성하기 어려워요...
var wait_functions = [
    blocking_wait.bind(void 0, 1),
    blocking_wait.bind(void 0, 1),
    blocking_wait.bind(void 0, 1)
];
for (var i = 0; i < wait_functions.length; ++i) {
    wait_functions[i]();
    console.log((i + 1) + '초가 지났어요!');
}

// 가능은 하지만...
var wait_functions = [
    promise_wait.bind(void 0, 1),
    promise_wait.bind(void 0, 1),
    promise_wait.bind(void 0, 1)
];
wait_functions.reduce(function (prev, curr, i) {
    return prev.then(function () {
        return curr().then(function () {
            console.log((i + 1) + '초가 지났어요!');
        });
    });
}, Promise.resolve());

es7
async
await

async

async 키워드를 붙여서

함수를 선언할 수 있음.

async 키워드가 붙은 함수는

프로미스 객체를 반환.

async 함수 블록 안에서는

await 연산자를 사용할 수 있음.

await

우항에 프로미스를 받는

단항 연산자.

프로미스가 끝날 때까지

non-blocking으로 기다림.

blocking 함수 호출과 마찬가지로

try...catch나 for 블록에서

사용 가능!

Promise

with

async / await

blocking 함수를 호출하듯이

비동기 함수를 호출할 수 있다!

function promise_wait(sec) {
    return new Promise(
        function (resolve, reject) {
            setTimeout(resolve, sec * 1000);
        }
    );
}


async function main() {
    await promise_wait(1);
    console.log('1초가 지났어요!');
    await promise_wait(1);
    console.log('2초가 지났어요!');
    await promise_wait(1);
    console.log('3초가 지났어요!');
}
main();

Promise

with

async / await

blocking 함수를 호출하듯이

비동기 함수를 호출할 수 있다!

for문, try...catch문 등을

마음껏 섞어 사용할 수 있다!

function promise_wait(sec) {
    return new Promise(
        function (resolve, reject) {
            setTimeout(resolve, sec * 1000);
        }
    );
}


async function main() {
    var wait_functions = [
        promise_wait.bind(void 0, 1),
        promise_wait.bind(void 0, 1),
        promise_wait.bind(void 0, 1)
    ];
    for (var i = 0; i < wait_functions.length; ++i) {
        await wait_functions[i]();
        console.log((i + 1) + '초가 지났어요!');
    }
}
main();

Promise

with

async / await

blocking 함수를 호출하듯이

비동기 함수를 호출할 수 있다!

for문, try...catch문 등을

마음껏 섞어 사용할 수 있다!

function promise_wait(sec) {
    return new Promise(
        function (resolve, reject) {
            setTimeout(resolve, sec * 1000);
        }
    );
}


async function main() {
    setTimeout(function () {
        console.log(`
            기다리는 동안
            다른 이벤트 루프가 돌 수 있기 때문에
            사용자가 페이지를 스크롤할 수도
            링크를 클릭할 수도 있다!
        `);
    }, 5000);
    await promise_wait(1000);
    console.log('이건 1000초나 지나서야 찍히겠지');
}
main();

블로킹 꺼져

Q&A