Async / await
코어 자바스크립트(정재남 저) 책을 기본으로 하여 자바스크립트를 공부하면서 내용을 정리하고자 한다.
04 Callback function
🧶 Async / await
Promise Chaining이 많아지면 가독성이 현저히 떨어지는 문제가 발생하는데,
ES2017(ES8)에서는 Promise 의 단점을 보완하고자 Async / await 이란 새로운 방식이 도입되었다.
Async / await 은 완전히 새로운 것이라기 보다는 기존 Promise를 토대로 좀 더 간편한 API를 제공하는 녀석이라고 보면 된다.
이런 것을 Syntactic sugar 라고 한다.
🪃 Async
⛳️ 기존 Promise 예시
기존 Promise 구문의 예시이다.
Promise 에서는 반드시 내부에서 resolve 나 reject 함수를 호출하여 상태를 완료시켜야만 결과가 도출된다.
그냥 리턴문을 적을 시
Promise {<pending>}상태가 유지된다.
🪅 Async 사용
async 를 사용하면 코드블럭 ( {} ) 안에 있는 코드들이 자동적으로 Promise로 변경된다.
엄청 간단한 코드가 된다.
async 키워드를 함수 앞에 적어주기만 하면 된다.
🪃 Await
⛳️ 기존 Promise 예시
기존 Promise 구문에서 goHalloweenParty()의 복잡한 체이닝은 콜백지옥을 연상시킨다.
Async / await 를 사용하면 좀 더 간결한 코드로 만들 수 있다.
🪅 Await 사용
위의 코드를 바꿔보면,
🪢 POINT 🪢
🪞 await 은 async 키워드로 설정된 함수 안에서만 사용이 가능하다.
💁🏻♀️ Error handling
👉🏼 For Example
getHalloweenItem2 함수 내부에 에러를 발생시키면 현재 구문에서는 에러를 핸들링하지 못한다.
🪄 Async / await 에서는 try / catch 구문을 통해 에러 핸들링한다.
다음과 같이 수정하면 가능해진다.
🔖 Additional
🪡 Promise.all
다시 코드를 보자.
getHalloweenItem1 함수와 getHalloweenItem2 함수는 각각 독립적인 함수이다.
굳이 위의 코드에서처럼 순차적으로 실행할 필요가 없다.
🪄 Promise.all - Promise의 병렬 처리
여러 개의 비동기 작업을 병렬적으로 처리하고 싶을 때 사용하는 것이 바로 Promise.all 이다.
다른 예시를 보면, 이해하기가 더 쉽다.
피자 만드는데 들어가는 토핑재료를 받아서 알려주는 함수가 있다고 치자.
3가지 종류의 피자가 만들어지는데 각각의 promise 를 병렬적으로 묶어서 실행하도록 Promise.all을 사용하고 있다.
🪡 Promise.race
여러 개의 비동기 작업 중 가장 먼저 끝나는 작업만 알고 싶다면 Promise.race를 사용하면 된다.
예시코드를 조금 바꿔보자.
getHalloweenItem2 함수의 시간을 3초로 변경하고, Promise.race를 실행하면 가장 먼저 실행되는 녀석만 출력된다.
피자가 만들어지는 시간을 토핑의 개수에 따라 다르게 설정하는 코드를 추가하였다.
Promise.race를 실행하면 3종류의 피자 중 가장 빠르게 만들어지는 피자인 토핑 2개의 ham & cheese 피자가 출력되고, 나머지는 무시된다.
🫖 Bonus
앞서 살펴보았던 코드를 이제 Async / await 으로 바꿔 보자.
👉🏼 For Example 1
👉🏼 For Example 2
👉🏻 Next Page
