본문 바로가기
Coding/Etc

Javascript ES6 async/await에 대해서

by Hide­ 2018. 7. 11.
반응형

간단하게 적는다.

ES7(EcmaScript 7)에는 async/await라는 기능이 존재한다.

이전에는 Promise를 통해 코드를 작성했다면, 그 기능을 async/await로 대체할 수 있다.

관련 비교하는 내용은 타 블로그에 자세하게 나와있으므로 설명은 생략한다.

튼, 코드를 작성하다가 아래와 같은 루틴의 코드를 만들었었다.


const test = async () => {
    await setTimeout(() => {
        console.log("timeout");
    }, 2000);
    await console.log(1);
    await console.log(2);
}

test();


내가 예상한 결과값은 아래와 같다.


timeout

1

2


하지만 위처럼 돌려보면,


1

2

timeout


형식으로 출력됐다.

처음에는 연속적인 동기처리를 해주고 싶을 때 then처럼 그냥 await도 연속적으로 붙여주는게 틀린 문법인가 싶었는데

그런건 아니었고 단지 setTimeout의 리턴값이 Promise가 아니기 때문이었다.

(async/await도 내부적으로는 Promise를 사용하고 있다)

따라서 위 코드는 아래와 같이 바꿔줘야 한다.


const test = async () => {
await new Promise((resolve)=>setTimeout(() => {
console.log("timeout");
resolve();
}, 2000));
await console.log(1);
    await console.log(2);
}


+ 추가

console.log()에도 await를 쓸 수 없다고 한다.

따라서 최종 코드는 아래와 같다.


const test = async () => {
await new Promise((resolve)=>setTimeout(() => {
console.log("timeout");
resolve();
}, 2000));
console.log(1);
    console.log(2);
}