ES7부터 async/await을 지원한다고 한다. 하지만 지금은 ES7이 보편화되지 않았기 때문에 Babel이라는 javascript precompiler를 사용해야 async/await을 사용할 수 있다. Babel은 높은 버전의 자바스크립트를 낮은 버전의 자바스크립트 문법으로 regenerate해주는 역할을 한다. async/await을 사용하려면, 먼저 babel과 preset, plugin들을 프로젝트에 설치해야한다.
javascript async/await을 사용하는데 필요한 preset과 plugin은 'es2015' preset과 'transform-async-to-generator' plugin 이다.
function asyncTask() {
return new Promise((resolve, reject) => {
setTimeout(() => {
// 3초가 걸리는 작업
resolve('비동기 작업 완료!');
}, 3000);
});
}
async function waitAsyncTask() {
const asyncValue = await asyncTask();
console.log(asyncValue);
}
waitAsyncTask();
waitAsyncTask 함수 앞에 async 키워드가 있는데 이 async function 내부에서 Promise객체를 return하는 함수를 await 하게되면 더이상 앞으로 나아가지 않고 promise를 기다린다. 실행해보면 asyncValue에는 Promise가 3초 뒤에 resolve한 값인 '비동기 작업 완료!!'가 출력된다. 비동기작업을 동기코드처럼 작성할 수 있는 보기 좋은 방법인 것 같다.