[JavaScript] async, await

JavaScript 뿐만 아니라 사실 모든 프로그램을 할 시에 중요한 요소 입니다.

특히 api 통신이 주가 되는 요즘 프로그램에서는요

그로 인해 JavaScript 에서는 콜백, 제네레이터, 프로미스 등 다양한 시도를 하였고 es8 (es2017) 에와서 엄청난 녀석을 도입하였는데 그게 바로

async/await  입니다.

기존 콜백방식을 벗어나 프로미스를 통한 방식으로 많은 부분을 해결 하려 했지만 여전히 콜백 지옥을 벗어나지 못하였고

제네레이터 역시 yield 라는 것을 새로 배우고 이터레이터 패턴을 익혀야 한다는 점에서 상당한 벽이 있었죠.

그에 반에 async/await는 정말 직관적입니다.

es6 에 추가된 Promises, generator

 

그럼 간단한 코드를 보겠습니다.

function test() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log("ASYNC FUNCTINO RESOLVED");
            resolve();
        }, 3000);
    });
}

async function a() {
    console.log("AAAA1");
    await test();
    console.log("AAAA2");
    return;
}

async function b() {
    console.log("BBBB1");
    await test();
    console.log("BBBB2");
    return;
}

await a();
await b();

// AAAA1
// ASYNC FUNCTINO RESOLVED
// AAAA2
// BBBB1
// ASYNC FUNCTINO RESOLVED
// BBBB2

단순히 적용하고자 하는 함수 앞에 async 를 붙여주고 async 가 붙은 함수 안에서만 await 를 써야합니다. 

test 는 기초적인 비동기 함수를 만든거고요. 각각 a, b 를 async 함수로 만들었죠. 그러고 각각의 async 함수앞에 await 를 붙여주니 a 의 동작이 모두 끝나야 b의 동작이 시작 되는것을 볼 수 있습니다.

즉, 비동기 함수 (async 함수) 에 await 를 붙이고 call를 하게 되면 그 밑에 줄은 실행하지 않게 되죠.

그럼 여기서 궁금한 점이 하나 생기죠 만약 a, b 를 콜할 때 await 를 안붙이고 콜하면 어떻게 될까요?

function test() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log("ASYNC FUNCTINO RESOLVED");
            resolve();
        }, 3000);
    });
}

async function a() {
    console.log("AAAA1");
    await test();
    console.log("AAAA2");
    return;
}

async function b() {
    console.log("BBBB1");
    await test();
    console.log("BBBB2");
    return;
}

a();
b();

이렇게 말이죠. 한번 예상해 보시고 결과를 확인해 보세요!!

 

결과

// AAAA1
// BBBB1
// ASYNC FUNCTINO RESOLVED
// AAAA2
// ASYNC FUNCTINO RESOLVED
// BBBB2

 

예상한 결과가 맞았나요? a, b 안에서는 각자의 함수들이 동기적으로 작동하지만, a, b 를 부르는 부분에서는 순서를 보장하지 않죠.

사실 async/await 는 어려운게 없습니다. Promises 를 쓰던 사람에게는 천국이 따로 없죠.

여러분의 코드도 async/await 를 적용해보세요