async/await 개요

async/await 패턴은 es8에서 도입되었는데 es6에서 표준화된 Promise 패턴으로도 불편함이 있었고 이 불편함을 해소하기 위해서 async/await 패턴이 도입되었다. 따라서 반드시 Promise 패턴을 알고 있어야 한다.

async/await 에서 사용되는 몇가지 규칙은 다음과 같다.

  • async를 함수 앞에 붙이면 비동기 함수가 된다.
  • await 는 반드시 async와 같이 사용되어야 한다.
  • await 뒤에는 반드시 Promise 객체가 와야 한다.
  • await는 Promise 객체의 비동기 작업이 끝날때까지 동기방식처럼 blocking 되어서 기다렸다가 작업이 끝나면 그 결과를 리턴한다.
  • async를 앞에 붙인 함수는resolved 된 Promise를 리턴하므로 만일 결과를 받아서 사용할려면 .then()으로 결과를 받아서 처리할 수 있다.

Quiz

Q: 1초마다 순차적으로 A, B, C를 출력하는 비동기 작업을 async/await 문장으로 수정하시오.

먼저 await 뒤에는 Promise 가 와야 하고 동기식으로 blocking해서 기다렸다가 결과가 리턴되면 그 결과를 받아서 리턴하므로 아래와 같이 작성한다.

await는 async 없이는 존재할 수 없으므로 전체를 함수로 감싸고 앞에 async를 붙인다. 그러면 함수는 비동기 함수가 된다.

CodePen

See the Pen xxxedVz by LeeDongKee (@eastflag) on CodePen.default