[Vue] async & await

프론트엔드를 개발하다보면 분명 옳은 코드인데 에러가 발생하지도 않고 내가 원하는대로 기능이 수행되지 않을 경우가 있다. 어느 시점에는 돌아가고, 어느 시점에는 돌아가지 않는 코드가 존재한다. 그것은 보통 비동기처리를 하지 않은 콜백 함수일 확률이 높다. 어느 정도 개발에 흥미를 붙이고 노력하는 사람이라면 그것이 Javascript의 비동기 처리 때문이라는 것을 알 수 있을 것이다.

 

자바스크립트 내에는 async & await 문법이 존재한다.

async 함수는 함수의 앞에 async를 붙여주고 함수의 내부 로직 중 비동기 처리 로직 앞에 await를 붙여주면 된다.

정확히 말하면 Promise 객체를 반환하는 API 호출 함수 앞에 await를 붙인다.

 

예시를 들어 설명해보자면, 콜백 함수의 문제를 해결한 프로미스를 사용한 코드이다. 코드의 깊이가 깊어지진 않지만, 코드는 여전히 길다.

 

async & await 문법을 사용하면 다음과 같이 코드를 줄일 수 있다.

이 함수는 해당 프로미스가 resolve될 때까지 기다린 뒤 다음 로직으로 넘어간다. 위의 코드에서는 await Users.findOne({})이 resolve될 때까지 기다린 뒤 다음 차후 로직인 user 변수를 초기화 한다. 

 

프로젝트에서는 비동기 처리를 어떻게 하는지 세가지 방법을 통해 async & await 함수를 수행해보겠다.

 

1. Store의 action 구현부에서만의 비동기처리

2. Store의 action 구현부에서만의 비동기처리 + 예외 처리

 

3. Store의 action 구현부에서만의 비동기처리 + API 호출 함수 내에서의 예외 처리

원래 Promise 개념으로 api를 호출하고 로직을 수행했더라면 현재는 async & await 방식으로 코드를 리팩토링 한것이다.

API를 한 번 호출 할때는 큰 차이를 체감하지 못할 수 있지만 API를 여러 번 호출하고 한번 응답 받은 데이터를 이용하여 또 다른 로직을 수행하는 경우에 이 비동기 처리는 큰 영향을 미칠 것이다.

따라서, 코드의 흐름에 따라 절차적인 처리를 요한다면 async & await 문법을 사용할 필요성이 있다.