[JavaScript] async, await

비동기 함수의 결과에따라 서로 다른 코드를 작성하고 싶으면 콜백 함수를 이용해야한다. 하지만 이는 가독성을 해치게되고 이 문제를 해결하기 위해 프로미스 (Promise)가 등장한다. 하지만 프로미스를 사용하더라도 좀 더 코드를 간결하게 작성하고 싶은 요구가 있었고 이를 개선하기 위해 async, await가 등장한다. async 를 function 앞에 두어 선언하고 그 함수 내부에 비동기 함수 앞에 await를 두고 호출하면 .then이나 .catch를 쓰지 않더라도 코드를 간결하게 작성할 수 있다. 물론 이때 가정은 await를 두고 호출할 비동기 함수는 프로미스를 반환하는 함수여야한다.

 

일단 비동기 함수를 사용할 때 발생하는 가독성 문제와 이를 프로미스로 해결하는 방법을 이해하지 못하면 async, await을 이용할 때의 장점을 이해할 수 없다. 따라서 이전 글을 반드시 이해하고 있어야한다.

 

2020/03/29 - [Vanilla JavaScript 프로젝트/JavaScript 공부] - [JavaScript] 프로미스(Promise)

[JavaScript] 프로미스(Promise)

이전 글에서의 결론은 프로미스를 반환하도록 비동기 함수를 작성하면 나중에 이 비동기 함수를 호출할 때 가독성 높게 코드를 작성할 수 있다는 점이었다.

 

 

위의 코드가 프로미스를 반환하는 비동기 함수이고 밑의 코드가 이 함수를 호출하는 코드이다. 하지만 여전이 then을 여러번 쓰고 then에 콜백 함수를 정의해야한다는 불편함이 있었다. 이를 async와 await를 이용하여 작성하면 다음과 같다.

 

 

코드가 훨씬 더 간결해졌다. 물론 try catch를 반드시 써야 에러를 처리할 수 있다는 점이 조금 걸리지만 이전보다 훨씬 더 간결해졌다. then을 여러번 쓸 필요도 없고 then에 전달할 콜백 함수를 작성할 필요도 없다. 코드를 이애하기도 더 직관적이다. 만약 에러 처리를 각각 하고 싶다면 콜백 함수를 모두 서로 다른 try catch 에 감싸서 처리를 해야한다. 이는 좀 불편할 수 있지만 async, await가 나온 이후부터는 위의 코드 처럼 then과 catch를 사용하는 방법 보다 지금의 방법을 더 많이 사용한다.

 

참고자료

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

async function

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/async_function

async function