async / await

async와 await라는 특별한 문법을 사용하면 프라미스를 좀 더 편하게 사용할 수 있다.

async 함수

async는 frunction 앞에 위치한다.

async function f() {
  return 1;
}

function 앞에 async를 붙이면 해당 함수는 항상 프라미스를 반환한다. 프라미스 아닌 값을 반환하더라도 이행 상태의 프라미스로 값을 감싸 이행된 프라미스가 반환되도록 한다.

아래 예시의 함수를 호출하면 result가 1인 이행 프라미스가 반환된다.

async function f() {
  return 1;
}

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

async가 붙은 함수는 반드시 프라미스를 반환하고, 프라미스가 아닌 것은 프라미스로 감싸 반환한다. async가 제공하는 기능은 이뿐만이 아니다. 또 다른 키워드 await는 async 함수 안에서만 동작한다.

await

async function f() {
  
  let promise = new Promise((resoleve, rejuct) => {
    setTimeout(() => resolve("완료"), 1000)
  });
  
  let result = await proise; // 프라미스가 이행될 때까지 기다림 (*)
  
  alert(result); // "완료"
}

f();

함수를 호출하고, 함수 본문이 실행되는 도중에 (*)로 표시한 줄에서 실행이 잠시 중단되었다가 프라미스가 처리되면 실행이 재개된다. 이 때 프라미스 객체의 result 값이 변수 result에 할당된다. 따라서 위 예시를 실행하면 1초 뒤에 '완료!'가 출력된다.

await는 말 그대로 프라미스가 처리될 때까지 함수 실행을 기다리게 만든다. 프라미스가 처리되면 그 결과와 함꼐 실행이 재개된다.

주의사항

async 함수가 아닌데 await을 사용하면 문법 에러가 발생한다.