Async/Await은 자바스크립트에서 비동기처리를 효율적으로 할 수 있도록 도와주는 구문이다. Async/Await을 이해하려면 Promise에 대한 이해가 필수적이기에, 해당 개념이 익숙하지 않다면 공부를 먼저 해야한다. [JavaScript/Nodejs] Promise 해당 링크에 정리해놓았다.

Promise

function examPromise(id) {
  return getUser(id)
    	.then(user => getPostByName(user.name))
    	.then(post => post.title)
    	.catch(err => err);
}

기존의 Promise의 경우 비동기 처리를 위해 then()과 catch()구문을 사용한다. Promise를 사용하면 위처럼 Promise Chain을 이용하여 비동기 처리를 한다.

위와 같은 스타일은 여러 문제를 가지는데, 동일한 이름의 메서드인 then()을 연쇄적으로 호출하기에 에러가 발생할 시 디버깅에 어려움이 생긴다. 또한, 복잡한 구조의 비동기 처리코드를 작성해야할 경우, 예외처리와 들여쓰기 부분에서 불편함이 생길 수 있다.

Async/Await

이러한 문제점들을 해결하기 위해 ES7에서는 Async/Await 키워드가 추가되었다.

async function examPromise(id) {
  try{
    const user = await getUser(id);
    const post = await getPostByName(user.name);
    
  	return post.title;
  } catch(err){
    return err;
  }
}

위처럼 async과 await 키워드로 비동키 코드를 마치 동기식 스타일로 작성할 수 있다.

await 키워드는 async 키워드가 붙어있는 함수 내부에서 사용할 수 있으며, 비동기 함수가 반환하는 Promise로부터 값을 반환해준다. 즉, await 키워드를 사용하면 다음 라인으로 바로 넘어가는 것이 아닌 Promise로부터 결과값을 얻을 수 있을 때까지 기다린다. 따라서 동기 코드 처리와 동일한 흐름으로 코드를 작성할 수 있기에 가독성에 도움이 된다.

또, async 키워드가 붙어있는 함수를 호출하면 Promise 객체가 반환된다. 즉, 해당 함수를 호출하는 곳에서 Async/Await 키워드를 사용하거나 Promise의 함수를 이용해야 한다.

마지막으로 예외처리하는 부분을 보면, 일반적인 동기식 코드처럼 try/catch구문을 사용하여 에러처리를 한다.

Await All

const foo = await getFoo();
const bar = await getBar();

await은 Promise의 값이 이용가능해질 때까지 기다리기 때문에, 한번에 하나씩만 기다릴 수 있다. 즉, 위 코드에서는 foo와 bar를 순차적으로 가져온다. 그렇다면 여러 개의 값을 동시에 가져오고 싶다면, 즉 다수의 Promise 객체를 동시에 기다리고 싶다면 어떻게 해야할까?

Promise에서는 Promise.all을 사용하여 이 문제를 해결하였다. 그러나 Async/Await에서는 이러한 구문을 가지고 있지 않다. 즉, Promise의 방식을 빌려와서 Promise.all을 사용해야 한다.

const [foo, bar] = await Promise.all([getFoo(), getBar()]);

이것이 가능한 이유는 Promise.all 역시 Promise를 반환하기 때문에 가능한 일이다.

참고 자료

[번역] async/await 를 사용하기 전에 promise를 이해하기
[자바스크립트] 비동기 처리 3부 - async/await