[Javascript] 되돌아보기 - async await로 비동기 처리하기.

Javascript를 처음 배울때 promise에 대해 한번에 이해하기는 쉽지 않았다. 이해가 어려운 만큼 사용하기도 어려웠으나, async await라는 promise를 쉽게 대체 할 수 있는 방법이 있어 다시 한번 정리한다.

📍 async와 await

async란?

async 키워드의 사용법

async function f() {
  return 1;
}

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

const f = async() => {
 return 1;
}
f().then(alert); //1

async만 사용할 경우 성공한 상태의 promise가 반환된다. (resolved promise)

conse f = async() {
  return Promise.resolve(1);
}
f().then(alert); // 1

async가 붙은 함수는 반드시 promise를 반환하고, promise가 아닌 것은 promise로 감싸 반환한다.
이 뿐아니라 async는 await 라는 키워드와 주로 같이 사용한다.

📍 await란?

let a = await promise;
// await는 async 함수 안에서만 사용 가능하다.

자바스크립트는 await를 만나면 promise가 처리될 때까지 기다린다. 결과는 그 이후 반환된다.

const f = async() => {

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

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

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

f();

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

await는 말 그대로 promise가 처리될 때까지 함수 실행을 기다리게 만든다. promise가 처리되면 그 결과와 함께 실행이 재개됨.

promise가 처리되길 기다리는 동안에 자바스크립트 엔진은 다른일(다른 스크립트를 실행, 이벤트 처리 등)을 할 수 있게 때문에, CPU 리소스가 낭비되지 않는다.