async와 await

async 함수

async는 function 앞에 위치한다.

 

async function f() {
  return 1;
}

f().then(alert); // 1

async를 붙이면 해당 함수는 항상 Promise를 반환한다. Promise가 아닌 값을 반환해도 이행상태의 Promise로 값을 감싸 이행된 Promise가 반환된다.

 

await

await는 async 함수 안에서만 동작한다.

 

async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 1000)
  });

  let result = await promise; // 프라미스가 이행될 때까지 기다림 (*)

  alert(result); // "완료!"
}

f();

함수를 호출하고 함수 실행 도중에 await이 있는 줄에서 실행이 잠시 중단되었다가 Promise가 처리되면 실행이 재개된다.

await은 Promise가 처리될 때까지 함수 실행을 기다리게 만든다. 이렇게하면 Promise가 처기되는 동안 엔진이 다른 일(다른 스크립트를 실행, 이벤트 처리 등)을 할 수 있어서, CPU 리소스가 낭비되지 않는다.

 

await은 promise.then보다 좀 더 세련되게 result를 얻을 수 있도록 하는 문법이며 가독성도 더 좋다.