async/await

ES8에서 도입된 async/await에 대해 정리하는 글이다. 

이전에 Promise를 사용하여 비동기처리를 하는 패턴에 대해 공부를 했었는데 이와 관련하여 비동기처리를 동기처럼 동작하도록 구현할 수 있는 async/await에 대해 알아보고자 한다. 

 

기본적으로 async/await는 프로미스를 기반으로 동작한다. async/await를 사용하면 프로미스의 then/catch 등 후속처리메서드에 콜백함수를 전달해서 비동기 처리결과를 후속처리할 필요없이 마치 동기처럼 프로미스를 사용할 수 있다.

 

1. async

async function hello() {
    return "hello";
}

hello().then((res) => {console.log(res)});

async 함수는 반드시 promise를 반환하는데 위 코드를 보면 async는 암묵적으로 프로미스가 resolve일때의 결과값을 반환해준다. 

 

2. await

function delay(ms) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
      console.log("hello await");
    }, ms);
  });
}

async function hello() {
  await delay(3000);
  return "hello";
}

//3초후 hello await 표출뒤 hello 표출
async function main() {
  const res = await hello();
  console.log(res);
}

main();

await 키워드는 async안에서 사용해야하고 반드시 프로미스 앞에서 사용해야 하는데 여기서 중요한건 await 키워드 사용시 해당 프로미스의 비동기처리가 수행이 완료된 상태일때까지 대기하다가 수행이 완료되면 resolve한 처리결과를 반환한다. 

위 코드를 보면 hello 함수에서 호출된 delay 함수의 수행이 완료가 되면 "hello" 를 리턴하게 된다. 마치 동기적으로 동작하는 것처럼 3초후 hello await를 먼저 표출하고 그 다음 hello가 console에 표출되는 것을 확인할 수 있다.