자바스크립트 async & await

 

async & await 이란?

async와 await은 새로운 개념이 추가된 것이 아니라 프로미스의 syntactic sugar이다. 

(*syntactic sugar: 기존에 존재하는 것을 감싸서 조금 더 간편한 API를 제공하는 것 ex) 클래스 ) 

프로미스를 조금 더 간결하고 간편하고 그러고 동기적으로 실행되는 것처럼 보이게 만들어준다. 

 

 

 

 

 

 

 

---

 

async & await 기본 문법

함수 앞에 async라는 예약어를 붙인다. 그러고 나서 함수의 내부 로직 중 비동기 처리 코드 앞에 await을 붙인다. (일반적으로 await의 대상이 되는 비동기 처리 코드는 axios 등 프로미스를 반환하는 API 호출 함수이다.)

 

async

function 앞에 async를 붙이면 해당 함수는 항상 프로미스를 반환한다. 프로미스가 아닌 값을 반환하더라도 이행상태의 프로미스(resolved promise)로 값을 감싸서 반환한다. 

 

await

 await은 async 함수 안에서만 동작한다. await은 말 그대로 프로미스가 처리될 때까지 함수 실행을 기다리게 만들고 프로미스가 처리되면 그 결과와 함께 실행이 재개된다. 이때의 반환된 프로미스 객체를 변수에 할당하여 사용할 수 있다. 프로미스가 처리되기를 기다리는 동안 엔진이 다른 일 (다른 스크립트 실행, 이벤트 처리 등)을 할 수 있기 때문에, CPU 리소스가 낭비되지 않고 await는 promise.then 보다 가독성도 좋고 쓰기 쉽다.

주의사항: await은 최상위 레벨에서 작동하지 않는다. 그렇게 되면 문법 에러가 발생합니다. 하지만 익명 async 함수로 코드를 감싸면 최상위 레벨 코드에서도 await을 사용할 수 있다. 

 

 

 

 

---

여러 개의 비동기 처리

async & await는 여러 개의 비동기 처리 코드를 다룰 때이다.

여러 개의 프로미스 체이닝을 계속해서 하게 되면 콜백 지옥과 같은 상황이 발생하게 되는 것처럼 코드가 지저분 해 질 수 있다. 이를 async와 await을 사용하면 우리가 그냥 동기식으로 코드를 순서대로 작성하는 것처럼 보이게 만들어 준다. 그래서 훨씬 가독성이 좋은 코드로 바꿀 수 있다. 이처럼 async await 문법을 이용하면 기존의 비동기 처리 코드 방식으로 사고하지 않아도 되는 장점이 생긴다.  

 

 

 

 

---

async & await의 에러 처리

프로미스가 정상적으로 이행되면 await promise는 프로미스 객체의 result에 저장된 값을 반환합니다. 반면 프로미스가 거부되면 마치 throw문을 작성한 것처럼 에러가 던져진다. 

여기서 던져진 에러를 처리하려면 try catch를 이용하면 된다. 프로미스에서 에러 처리를 위해 .catch()를 사용했던 것처럼 aysnc에서는 catch {}를 사용하면 된다. await가 던진 에러를 제어 흐름이 catch 블록으로 넘긴다. 코드를 실행하다가 발생한 네트워크 통신 오류뿐만 아니라 간단한 타입 오류 등 일반적은 오류까지도 catch로 잡아낼 수 있다. 

 

try catch가 없다면 async 함수로 반환된 프로미스가 거부 상태가 된다. 이 함수에 .catch()를 추가하면 거부된 프로미스를 처리할 수 있다. .catch()를 추가하지 않으면 처리되지 않은 프로미스 에러가 발생할 수 있고 이런 에러는 다시 전역 이벤트 핸들러 unhandledrejection을 사용해 잡을 수 있다.

 

 

 

 

 

 

 

---

알아 두어야 할 점 

async & await를 사용하면 promise.then()이나 promise.catch()가 거의 필요 없다. 하지만 위에 언급했듯 가장 바깥 스코프(전역 스코프와 같은)에서 비동기 처리가 필요할 때와 같이 사용해야만 하는 경우가 생기기 때문에 async/await가 프라미스를 기반으로 한다는 사실을 알고 있어야 한다.

 

 

 

 

 

---

++ 유용한 프로미스 API

promise.all 

 모든 프로미스가 다 받아질 때까지 기다렸다가 배열로 한다. 

promise.race 

 배열에 전달된 프로미스중 가장 먼저 값을 리턴하는 아이만 전달된다.

 

 

 

 

 

 

 

 

 

 

 

 

reference

https://joshua1988.github.io/web-development/javascript/js-async-await/

https://ko.javascript.info/async-await

https://www.youtube.com/watch?v=aoQSOZfz3vQ