async/await

·2023년 1월 30일
0

개발 지식

목록 보기
17/96
post-thumbnail

async/await

키워드
es8, syntactic sugar

콜백에 의한 비동기 처리를 좀 더 가독성 있으면서, 메서드를 통해 간편하게 처리할 수 있도록 Promise 객체가 나타났다. async/awaitPromise 와 기능이 동일하다. 기존 기능이 문제가 있어서 개선하기 위해 나타나기 보다는, Promise 를 좀 더 간편하게 사용하기 위해 나타났다. 이러한 기능들을 보고 syntactic sugar 라고 한다.

사용법 async

선언하는 함수 앞에 async 를 붙이면 된다. 함수에 async 를 붙이는 것을 통해 기존 함수와 두 가지 차이가 생기게 된다.

  1. 해당 함수는 await 를 사용하여 비동기 프로세스를 진행할 수 있게 된다.
  2. 해당 함수의 리턴 값은 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() 보다 길어질 수 있다. 이 방식도 개발자마다 선호하는 것이 다르다고 하는데… 사실 뭘 사용하든 상관은 없다. 어차피 취업하면 회사 컨벤션에 맞춰 사용해야 한다.

참고
우아한 애자일 1기 김지원 - async/await

profile
새로운 것에 관심이 많고, 프로젝트 설계 및 최적화를 좋아합니다.

0개의 댓글