asnyc & await

async

async 키워드는 function 앞에 위치합니다. function 앞에 async를 붙이면 해당 함수는 항상 Promise를 반환합니다. Promise가 아닌 값을 반환하더라도 이행 상태의 Promise로 값을 감싸 이행된 Promise가 반환되도록 합니다. 아래의 예시로 테스트해보면 f()와 t() 모두 같은 결과를 보여줍니다.

async function f() {
  return 1;
}

f().then(alert);

async function t() {
  return Promise.resolve(1);
}

t().then(alert);

await

awiat은 async 함수 안에서만 동작합니다. JavaScript는 await 키워드를 만나면 Promise가 처리될 때까지 기다립니다. 결과는 그 이후 반환됩니다. 아래의 예제로 테스트를 진행하면 Promise를 실행하면서 잠시 중단 되었다가 Promise가 처리되면 실행이 재개되는 것을 확인할 수 있습니다.
await은 말 그대로 Promise가 처리될 때까지 함수 실행을 기다리게 만듭니다. Promise가 처리되면 그 결과와 함께 실행이 재개됩니다. Promise가 처리될 때까지 기다리는 동안에는 엔진이 다른 일(다른 스크립트 처리, 이벤트 처리 등)을 할 수 있기 때문에 CPU 리소스가 낭비되지 않습니다.

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

  let result = await promise;
  alert(result);
}

f();