자바스크립트 async / await 예제

목차

async / await 란 무엇인가

Promise 객체를 좀 더 쉽게 다룰 수 있게 고안된 문법입니다. 이해가 어렵지 않고 사용법도 쉽게 익힐 수 있습니다. 다만 ECMAScript 2017에서 표준으로 정의된 문법이므로 이전 버전에서 사용하기 위해서는 Babel, Polyfill과 같은 라이브러리를 사용하여 이전 버전 문법으로 변환해야 합니다.

 

[자바스크립트] Promise 예제를 통해 쉽게 이해하기

[자바스크립트] Promise 예제를 통해 쉽게 이해하기

Promise 객체에 대한 이해가 좀 더 필요하시면 위 글을 참고 하세요.

 

async 기본 예제

async function greet() {
    return 'hello';
}

greet().then(console.log);

function 앞에 async 키워드만 붙여주면 됩니다. async 함수에서는 Promise가 아닌 값을 리턴하더라도 resolved promise가 반환됩니다.

 

위와 같이 hello가 출력됩니다.

 

async function greet() {
    return 'hello';
}

console.log(greet());

비교를 위해 greet 함수 리턴 값 자체를 찍어보면 명확하게 이해가 가능합니다.

 

위와 같이 Promise 객체가 반환되는 것을 알 수 있습니다. async 키워드가 없었다면 바로 hello가 출력되었겠죠.

 

async function greet() {
    return Promise.resolve('hello');
}

greet().then(console.log);

명시적으로 resolved promise 반환도 가능합니다.

 

마찬가지로 hello가 출력됩니다.

 

추가 설명

function 앞에 async를 선언한 함수는 항상 Promise 객체를 반환합니다. Promise가 아닌 값을 리턴하더라도 내부적으로 Promise로 감싸서 리턴합니다. 이어서 설명할 async 함수 안에서만 사용할 수 있는 await 키워드는 매우 유용합니다.

 

 

await 기본 예제

function greet() {
    return new Promise(function(resolve){
        setTimeout(function() {
            resolve('hello');
        }, 1000);
    });
}

(async function() {
    var result = await greet(); //resolved 될 때까지 대기
    console.log(result);
})();

앞에 async / await 키워드만 붙여주면 비동기 작업의 순차 처리가 일반 순차 프로그래밍과 동일하게 가능합니다.

 

1초 후 hello가 출력됩니다.

 

추가 설명

promise.then을 사용하는 것보다 훨씬 간결하여 쓰기도 편하고 가독성도 뛰어 납니다. async로 선언된 함수 안에서만 사용이 가능합니다. await 키워드를 사용하더라도 그 작업이 처리되는 동안 다른 모든 프로세스가 중단되는 것은 아니며 엔진이 다른 일을 할 수 있으므로 자원이 비효율적으로 운영되지 않습니다.