Javascript ES6 async/await에 대해서

간단하게 적는다.

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);

}