앞의 글에 나왔던 Promise는 콜백 패턴의 단점을 보완해주지만 또 다른 문제점이 있다.

• 특정 조건에 따라 분기를 나누기 어렵다.
• 어떤 부분에서 에러가 발생했는지 파악하기 어렵다.
• then지옥이 발생할 가능성이 있다.

이러한 문제를 해결하기 위해 async/await가 등장하였다~!

async / await

• 프로미스를 기반으로 동작한다.
• async / await를 사용하면 프로미스의 then/catch/finally 후속 처리 메서드를 사용하지 않고 동기 처리처럼 프로미스가 처리 결과를 반환하도록 구현할 수 있다.

async 함수 선언식으로 사용

• async가 붙은 함수는 항상 반환값을 resolve하는 프로미스를 반환한다.

async function 함수이름() {
  return 결과 값;
}

async 함수 표현식으로 사용

• fulfilled된 프로미스를 반환한다.
  
  

• .then() 을 사용하면 반환된 값을 바로 호출하여 사용할 수 있다.

snack().then((value) => console.log(value))
// cake!

snack().then(console.log)
// cake!

await

• 프로미스가 settled 상태가 될 때까지 대기하다가 settled 상태(비동기 처리가 수행된 상태)가 되면 프로미스가 resolve한 처리 결과를 반환한다.
• async 함수 내부에서 사용할 경우 프로미스 앞에서 사용해야 한다.

async function 함수이름() {
  await 비동기 처리 메서드 이름();
}

// 화살표 함수
const 함수이름 = async () => {
  await 비동기 처리 메서드 이름();
}

• 서로 연관이 없이 개별적으로 수행되는 비동기 처리는 앞선 비동기 처리가 완료될 때까지 대기해서 순차적으로 처리할 필요가 없다. -> all을 사용하여 처리한다.

async function foo() {
  const res = await Promise.all([
    new Promise(resolve => setTimeout(() => resolve(1), 3000)),
    new Promise(resolve => setTimeout(() => resolve(2), 2000)),
    new Promise(resolve => setTimeout(() => resolve(3), 1000))
  ]);
  
  console.log(res); // [1, 2, 3]
}

foo();	// 약 3초 소요된다.
    

에러처리

• try-catch 문을 사용한다.
• async 함수를 호출한 후 후속 처리 메서드(.catch)를 사용하여 에러를 캐치할 수 있다.

제어흐름의 이해 (예시)

const snack = () => Promise.resolve('와, 맛있겠다!');

async function mySnack() {
  console.log('치즈 케이크 주세요!');
  const res = await snack();
  console.log(res);
}
console.log('주문하시겠어요?');
mySnack();
console.log('주문하신 케이크 나왔습니다!');

출력값은?

[참고]
모던 자바스크립트 Deep Dive
알잘딱깔센 JavaScript