드림코딩 자바스크립트 13. 비동기의 꽃 JavaScript async 와 await 그리고 유용한 Promise APIs | 프론트엔드 개발자 입문편 (JavaScript ES6)
영상을 보며 정리하고자 한다!
async
/ await
async
/ awiat
가 도입되었다.async
/ awiat
는 프로미스를 기반으로 동작한다. 대신, 프로미스의 후속 처리 메서드 없이 동기 처리처럼 프로미스가 처리 결과를 반환하도록 구현된다. promise
vs async
/ await
: 무조건 async
/ await
가 좋다는 것은 아니다. 상황에 따라 적절히 사용해야 한다.async
써보기
위 코드는 pending
상태이다. 이를 바꾸기 위해서 return
을 resolve
로 작성해야한다. 바꾸면 아래와 같이 fulfilled
상태로 나온다.
async
로 작성하려면?function
앞에 async
키워드를 작성한다.
async
키워드를 사용해 정의한 경우 Promise
를 쓰지 않아도 자동적으로 함수 안에 있는 코드 블럭들이 프로미스로 변환된다.async
함수가 명시적으로 프로미스를 반환하지 않더라도 async
함수는 아묵적으로 반환값을 resolve
하는 프로미스를 반환한다.await
작성하기await
키워드는 async
가 붙은 함수 안에서만 사용 가능하다.사과와 바나나 모두를 따오는 pickFruits
함수를 promise chaining을 이용하면 아래와 같이 작성할 수 있다.
프로미스도 중첩적으로 chaining을 하게 되면 콜백 지옥과 비슷한 문제점이 발생된다. 따라서 이를 async
와 await
키워드를 사용하여 다시 작성한다.
async
와 await
키워드를 사용하면 우리가 동기적으로 코드를 작성하는 것처럼 쓸 수 있고 return
값도 자연스럽게 받아올 수 있어 간편하다!
try...catch
문을 사용해 에러를 캐치할 수 있다.awiat
병렬 처리위 코드의 pickFruits
함수는 종료될 때까지 약 6초가 소요된다. 첫 번째 프로미스 getApple
이 settled
상태가 될 때까지 3초, 두 번째 프로미스 getBanana
가 settled
상태가 될 때까지 3초가 소요되기 때문이다.
이 비동기 처리는 서로 연관이 없이 개별적으로 수행되는 비동기 처리이기 때문에 앞의 비동기 처리가 완료될 때까지 대기해서 순차적으로 처리할 필요가 없다. 이를 아래와 같이 병렬 처리하게 된다면 더욱 빠르게 실행될 것이다.
프로미스에서 제공하는 API를 사용하면 위 코드를 더욱 가독성 좋게 작성할 수 있다.
Promise.all
Promise.race
: 다만 가장 먼저 처리되는 프로미스의 결과(혹은 에러)를 반환한다.