AHRIBORI.COMv0.9
HomeAbout (2)Javascript (7)CSS (12)React (3)Webpack (1)Java (0)Node.js (4)ElasticSearch (1)자료구조 (8)알고리즘 (6)Selenium (1)Linux (2)Docker (1)Git (1)Tip (4)Issue (1)Memo (3)

비동기작업 처리하기 - 3. Async/Await

아리보리 | 2017.03.17 11:25 | 조회 1208 | 추천 0 | 댓글 0

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한 값인 '비동기 작업 완료!!'가 출력된다. 비동기작업을 동기코드처럼 작성할 수 있는 보기 좋은 방법인 것 같다.