[46장] 제너레이터와 async/await

개요

• ES8에서 도입
• 예전보다 간단하고 가독성 있게 비동기를 동기처럼 처리할 수 있게 됨
• 프로미스를 기반으로 동작
  • 프로미스의 then/catch/finally 후속 처리 메서드 없이 프로미스를 간단하게 동기처럼 동작시킬 수 있음

async 함수

• async 키워드를 사용해 정의한 함수
• 언제나 프로미스 반환
  • 함수가 명시적으로 프로미스를 반환하지 않더라도 반환 값을 resolve로 감싸서 무조건 프로미스 반환
• await 키워드는 반드시 async 함수 내부에서만 사용 가능

await 키워드

• 프로미스가 settled(성공이든 실패든 비동기 처리가 완료된 상태)가 될 때까지 기다리다가 settled 상태가 되면 프로미스가 resolve한 처리 결과 반환
  • 즉 다음 코드 라인 실행을 일시 중지시켰다가 프로미스 라인이 settled 상태가 되면 코드 실행을 재개
  • 보통 반환 값을 바로 변수에 넣어서 사용
• 반드시 프로미스(비동기 로직) 앞에 붙여줘야 함

활용

• 모든 프로미스를 await를 붙여 사용할 필요는 없음
  • 서로 연관이 있는 상태일 때만! (= 이전의 반환 값으로 다음 로직을 처리하는 경우)
• 서로 연관이 없는 여러 개의 프로미스를 실행한다면 await보다는 Promise.all을 사용하는 게 낫다.
  • await는 프로미스를 동기적으로 실행시켜서 앞 로직이 완료되기를 기다렸다가 다음 로직을 실행하는데 Promise.all은 여러 개의 비동기를 모두 병렬적으로 실행시킬 수 있으므로 처리 시간이 더 적게 걸린다.

에러 처리

• async/await는 try/catch 문으로 에러를 처리한다.
  • 비교: Promise는 then/catch 문으로 에러 처리
• catch문에서는 try문에서 발생한 비동기/동기 로직의 모든 에러를 캐치할 수 있다.