async/await
키워드
es8, syntactic sugar
콜백에 의한 비동기 처리를 좀 더 가독성 있으면서, 메서드를 통해 간편하게 처리할 수 있도록 Promise 객체가 나타났다. async/await 는 Promise 와 기능이 동일하다. 기존 기능이 문제가 있어서 개선하기 위해 나타나기 보다는, Promise 를 좀 더 간편하게 사용하기 위해 나타났다. 이러한 기능들을 보고 syntactic sugar 라고 한다.
사용법 async
선언하는 함수 앞에 async 를 붙이면 된다. 함수에 async 를 붙이는 것을 통해 기존 함수와 두 가지 차이가 생기게 된다.
- 해당 함수는
await를 사용하여 비동기 프로세스를 진행할 수 있게 된다. - 해당 함수의 리턴 값은
Promise객체가 된다.
사용법 await
기존 Promise.then() 작업을 await 가 담당한다. 만약 해당 이벤트가 비동기 과정이 필요한 이벤트의 경우라면 호출 시 await 를 사용하는 것으로, 비동기 과정을 진행할 수 있게 된다. 단 await 를 사용하기 위해서는 이러한 과정을 진행하는 부모 함수를 생성하여 async 를 선언해줘야 한다. await 역시도 리턴 값은 Promise 객체이다. Promise.catch() 에 의한 예외 처리 작업은 try/catch 를 통해 해주면 된다.
편해진 점 1. new Promise가 필요 없어짐
Promise 를 사용하면서 Promise 를 반환하는 고차함수 작업을 하는 작업이 많아졌다. 이 때 Promise 생성자와 resolve() , reject() 도 함께 작업을 해주어야 하는데 이게 길어서 귀찮다. 이럴 때 함수에 async 를 달아주는 것 만으로 Promise 를 리턴 할 수 있게 하였다.
편해진 점 2. 가독성
비동기 시 Promise 를 통해 콜백지옥에서 벗어날 수 있었다. 다만 비동기 요청이 잦은 상황에서, 중간 중간 동기 이벤트가 섞여지는 경우에는 Promise 만으로는 가독성이 좋다고 할 수 없게 되었다. (물론 콜백으로 하는 것보단 좋다)
await 를 사용하면 동기 작업은 그대로 호출하고 비동기 작업에만 await 를 걸어주면 되기 때문에, Promise.then() 대비 한 블럭 안에서 동일하게 처리할 수 있는 경우가 많아진다.
😓 다만 코드의 작성량이나 줄은
Promise.then()보다 길어질 수 있다. 이 방식도 개발자마다 선호하는 것이 다르다고 하는데… 사실 뭘 사용하든 상관은 없다. 어차피 취업하면 회사 컨벤션에 맞춰 사용해야 한다.
