[JS] async & await - 직관적인 비동기 처리 코드 작성하기

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

async 함수

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

async function f() {
	return 1;
}
f().then(alert); //1

await

await은 async함수 안에서만 동작한다.
자바스크립트는 await 키워드를 만나면 프로미스가 처리될 때까지 기다린다.

async function f() {

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

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

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

f();

await은 promise.then보다 좀 더 세련되게 프로미스의 result값을 얻을 수 있도록 해주는 문법이다. promise.then보다 가독성도 좋고 쓰기 쉽다.