이전 시간에 배웠던 Promise 좀더 쉽고 직관적이게 사용할 수 있도록
도와주는 기능이 있다.
async
-
어떤 함수를 비동기 함수로 만들어주는 키워드
-
함수가 Promise를 반환하도록 변환해주는 그런 키워드이다.
함수 앞에 async라고. 붙여서 사용하는 방식으로 사용한다.
원래라면 객체를 반환하는 함수이지만 async를 붙인다면?
결과를 출력해보면 Promise 객체가 반환되고
상태는 성공인 상태에 결과값이 초기에 반환하도록 설정해 둔 것들이 들어가 있는 것을
확인할 수 있다.
async를 붙이기 전의 해당 객체를 결과값으로 갖는 새로운 Promise를 반환하는 함수로 변환되는 것이다.
이렇게 async를 붙이는 것만으로 간단하게 Promise를 반환하는 함수로 바꿔줄 수 있는 것이다.
애초에 Promise를 반환하는 비동기 함수였다면
그냥 별다른 동작없이 Promise가 반환되어지는 것을 확인할 수 있다.
과연 프로그래밍 세계에서 이런 기능을 어디에다가 활용할 수 있을까?
📚 - 예제 async을 활용해보자
async는 await과 함께 써야 제대로 된 기능을 할 수 있다.
await은 async 함수 내부에서만 사용 가능 한 키워드이다.
await
- Promise가 완료될 때까지 함수의 실행을 일시 중지하고, 그 Promise의 결과를 반환한다. await는 비동기 코드를 동기적으로 작성할 수 있도록 도와준다.
- 이는 then 체인보다 가독성이 높다.
기존엔 Promise chanining 방식으로 함수에 then 메서드를 이어 사용하는 방식을 사용하였다.
async , await를 사용하면 더이상 그런 식으로 작성할 필요가 없어진다!
여기서 await은 위 getData() 함수가 반환하는 Promise 작업이 종료될 때까지 기다려준다.
종료가 되면 const data 변수에 넣어주는 역할을 한다
data를 출력해보면 이 비동기작업의 결과값이 그대로 data 변수에 담겨서
출력되는 것을 확인할 수 있다.
🤔 이렇게 편리한 것을 일반 함수에서도 쓸 수 있지 않을까?
async 키워드가 붙지 않은 일반 함수에서 사용하려고 하면
await 식은 비동기 함수 내부 및 모듈의 최상위 수준에서만 사용할 수 있다는 에러가 뜬다.
💡 결론은!
이처럼 async와 await을 이용하면
비동기작업을 실행할 때 마치 동기작업처럼 매우 간결하게 실행할 수 있으므로
매우 가독성이 높아지는 효과를 볼 수 있다.
