드림코딩 자바스크립트 13. 비동기의 꽃 JavaScript async 와 await 그리고 유용한 Promise APIs | 프론트엔드 개발자 입문편 (JavaScript ES6)
영상을 보며 정리하고자 한다!

1. async / await

• 제너레이터를 사용해서 비동기 처리를 동기 처리처럼 동작하도록 구현했지만 코드가 길어지고 가독성이 나빠졌다. 이를 가독성 좋게 구현할 수 있도록 async / awiat가 도입되었다.
• async / awiat는 프로미스를 기반으로 동작한다. 대신, 프로미스의 후속 처리 메서드 없이 동기 처리처럼 프로미스가 처리 결과를 반환하도록 구현된다.
• promise vs async / await: 무조건 async / await가 좋다는 것은 아니다. 상황에 따라 적절히 사용해야 한다.

2. async 써보기

1. 만약 promise를 사용했다면?

위 코드는 pending 상태이다. 이를 바꾸기 위해서 return을 resolve로 작성해야한다. 바꾸면 아래와 같이 fulfilled 상태로 나온다.

2. async로 작성하려면?

function 앞에 async 키워드를 작성한다.

• async 키워드를 사용해 정의한 경우 Promise를 쓰지 않아도 자동적으로 함수 안에 있는 코드 블럭들이 프로미스로 변환된다.
• async 함수가 명시적으로 프로미스를 반환하지 않더라도 async 함수는 아묵적으로 반환값을 resolve하는 프로미스를 반환한다.

3. await 키워드!

await 작성하기

• await 키워드는 async가 붙은 함수 안에서만 사용 가능하다.

사과와 바나나 모두를 따오는 pickFruits함수를 promise chaining을 이용하면 아래와 같이 작성할 수 있다.

프로미스도 중첩적으로 chaining을 하게 되면 콜백 지옥과 비슷한 문제점이 발생된다. 따라서 이를 async와 await 키워드를 사용하여 다시 작성한다.

async와 await 키워드를 사용하면 우리가 동기적으로 코드를 작성하는 것처럼 쓸 수 있고 return 값도 자연스럽게 받아올 수 있어 간편하다!

error가 발생한다면?

• try...catch문을 사용해 에러를 캐치할 수 있다.

4. awiat 병렬 처리

위 코드의 pickFruits 함수는 종료될 때까지 약 6초가 소요된다. 첫 번째 프로미스 getApple이 settled 상태가 될 때까지 3초, 두 번째 프로미스 getBanana가 settled 상태가 될 때까지 3초가 소요되기 때문이다.

이 비동기 처리는 서로 연관이 없이 개별적으로 수행되는 비동기 처리이기 때문에 앞의 비동기 처리가 완료될 때까지 대기해서 순차적으로 처리할 필요가 없다. 이를 아래와 같이 병렬 처리하게 된다면 더욱 빠르게 실행될 것이다.

5. 유용한 Promise API

프로미스에서 제공하는 API를 사용하면 위 코드를 더욱 가독성 좋게 작성할 수 있다.

• Promise.all
  

• Promise.race: 다만 가장 먼저 처리되는 프로미스의 결과(혹은 에러)를 반환한다.