개요
프로젝트를 할 때는 성능에 대한 부분은 신경을 쓰지 못했는데, 면접&코테를 준비하면서 알게 된 'Promise와 async&await를 이용한 비동기 처리'를 공부하게 되었다.
axios를 통한 API 호출
데이터 통신을 위한 간단한 API 생성한 후, axios를 통해 데이터를 가져오는 함수 3가지를 작성했고, getData 함수를 통해 데이터 통신 함수를 호출해보았다.
순서대로 실행되지 않음 (비동기)
순서대로 (이전 함수가 완료될 때까지 기다린 후 다음 함수 실행) 실행되지 않는 것을 확인할 수 있다. 이러한 것을 '비동기'라고 한다.
Promise
통신 함수가 Promise 객체를 반환하도록 수정하고, getData 함수에서 then/catch를 통해 동기적으로(순서대로) 실행될 수 있도록 수정하였다.
순서대로 실행됨 (동기)
순서대로 (이전 함수 응답 완료 후 다음 함수 실행) 실행되는 것을 확인할 수 있다. 이러한 것은 '동기'라고 한다.
async & await
호출 함수가 많을수록 getData 함수 길이가 늘어나 가독성이 떨어진다고 느꼈고, async & await를 활용해 코드를 더 간결하게 줄여보았다.
*통신 함수는 promise 객체를 반환하도록 Promise 혹은 async&await 사용하면 된다.
순서대로 실행됨 (동기)
순서대로 실행되는 것을 확인할 수 있다. 또한, 위에서 then/catch를 통해 구현한 것보다 코드가 훨씬 간결하고 직관적인 것도 확인할 수 있다.
