async/await

---

async

async키워드는 function 앞에 위치한다.

async function f() {
  return 1;
}

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

위 함수를 호출하면 result가 1인 이행 프라미스가 반환된다.

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

await

문법:

let value = await promise;

JS는 await 키워드를 만나면 프라미스가 처리될 때까지 기다린다. 결과는 그 이후 반환된다.

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

f();

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

에러 핸들링

프라미스가 정상적으로 이행되면 await promise는 프라미스 객체의 result에 저장된 값을 반환한다. 반면 프라미스가 거부되면 throw문을 작성한 것처럼 에러가 던져진다.

async function f() {
  await Promise.reject(new Error("에러 발생!"));
}

// 위 코드는 아래 코드와 동일하다.

async function f() {
  throw new Error("에러 발생!");
}

await가 던진 에러는 try..catch를 사용해 잡을 수 있다.

async functin f() {

  try {
  	let response = await fetch('http://유효하지-않은-주소');
  } catch(err) {
  	alert(err); // TypeError: failed to fetch
  } 
}

f();