[Vue.js] JavaScript 자바스크립트 Promise return 활용방법(feat.axios)

 

Promise란?

" A promise is an object that may prodeuce a single value some time in future"

 

즉, 자바스크립트의 비동기 처리 로직에서 순서를 지켜 실행시키고 싶을 때 사용하는 개념입니다.

쉽게 말해 특정 코드의 실행이 끝날때 까지 기다렸다가,

완료되면 리턴값으로 원하는 값을 반환할 수 있습니다.

 

자바스크립트의 비동기 처리와 콜백함수는 코드가 짜여진 순서대로 실행되지 않기 때문에,

 

예를 들어 프론트에서 백으로 article 생성 데이터를 보낸 후 article list를 요청해서 받아오고 싶을 때,

방금 생성한 article을 포함하지 않은 article list가 페이지에 보여질 수가 있습니다.

 

따라서 이러한 경우, Promise를 쓰면 매우 유용합니다.

 

---

사건의 발단

 

회의록 관리를 위한 새로운 project를 생성하여 백엔드로 axios.post 보내기.

DB에 저장하여 방금 생성한 project가 추가된 project 전체 list를 받아 store에 저장.

modal 창의 project 생성 폼 입력 후 창을 닫으면 project main 페이지에서 project 전체 리스트를 볼 계획이었지만,

1. SinglePageApplication 방식의 개발로 메인 페이지에는 새로고침을 하지 않는 이상 project list를 볼 수 없음
2. 백에서 새로운 project list를 받아오기 전에 기존의 project list를 가져온다 

의  2가지의 문제점이 있었습니다.

 

따라서 1번 문제의 경우, 입력 폼 제출 시 프로젝트를 생성하는 함수에서 axios.post 성공 후

데이터를 반환하여 vue 페이지에서 확인할 수 있게 했습니다.

 

이 1번의 문제를 해결하기 위해서는 2번의 문제를 해결해야 했습니다. 

 

이제 삽질을 해봅시다.

 

 

예시

페이지 새로고침 후 project list 조회

예를 들어서 처음 project 메인 페이지에서 created() 함수로 프로젝트 리스트를 볼 수 있습니다.

현재 6개가 생성되어 있는 것을 볼 수 있고, 마지막으로 생성한 프로젝트 title은 "WTD4"입니다.

 

프로젝스 생성 폼 입력

새로운 프로젝트 이름을 "WTD5"로 하고 생성을 해봅니다.

 

watch를 사용한 project list 가져오기

프로젝스 생성 폼 모달 창이 닫히고 다시 메인페이지로 돌아왔을 때,

가져오는 건 이전의 project list로 마지막 생성 프로젝트가 여전히 "WTD4"인 것을 볼 수 있습니다.

 

watch를 사용해서 data의 projectStatus 상태가 바뀌는 즉시 projectList 출력

project 메인페이지에서 store에 저장된 projectStatus를 watch로 감시하고 있다가

데이터의 변화가 생기는 즉시 projectList가 새로 업데이트 되었다는 사인으로 인식하고 출력하려고 했습니다.

 

 

이를 위해서 vuex store index.js에 작성한 함수는,

 

store의 프로젝트 생성, 리스트 조회 함수들

addProject의 axios.post로 프로젝트 생성 후 성공(.then)하면

프로젝트 리스트를 조회하는 fetchProjectList 함수를 dispatch로 실행하고,

현재의 projectStatus 상태를 반대로 변경해주어, project 메인페이지에서 watch로 확인할 수 있게 했습니다.

 

하지만, 콜백함수 비동기 처리로 인해 'fetchProjectList'함수 실행이 완료되기 전

projectStatus 상태가 먼저 변하게 되는 것입니다.

 

따라서 Promise를 활용해 문제를 해결해보았습니다.

 

 

해결방법

 

project 생성 함수에서 new Promise로 project list 반환하기

 

174번째 줄의 return new Promise((resolve, reject))는

return : 원하는 값 반환하기

new Promise : 새로운 콜백함수 

resolve : 성공 시 원하는 데이터 값을 넣어서 반환

reject : 오류 발생 시 데이터 반환

 

한 마디로 addProject의 axios.post 요청 성공 시 resolve()에 원하는 값을

인자로 넣어서 반환이 가능하며, 

실패 시 reject()에 원하는 값을 인자로 넣어 반환 가능

 

따라서 fetchProjectList 함수 실행 완료 후 state에 저장한 projectList를 반환하려고 했지만,

여기서 또 하나의 문제 발생!

 

아직까지도 fetchProjecList의 실행 완료까지 기다리지 못하고 있습니다.

 

project 리스트 조회 함수에도 Promise 사용

따라서 fetchProjectList에도 Promise를 사용하여 axios.get 요청이 성공하면,

projectList를 저장하는 'SET_PROJECTLIST mutations를 실행함과

동시에 보내 온 project 리스트 데이터를 return합니다.

 

프로젝트 리스트 return 값을 받아 다시 return 하기

 

이를 179번에서 data라는 변수를 선언하여 return 값을 받은 후,

다시 resolve에 담아 return 합니다.

 

 

그러면 project 메인페이지 methods에서 프로젝트 생성 함수 this.addProject() 실행 후

return 받아온 값 res에 프로젝트 리스트 정보가 담겨있는 것을 콘솔창에서 확인할 수 있습니다.

 

 

addProject done으로 기존 18개에서 1개 더한 19개의 리스트 반환

 

새롭게 추가한 19번째 "WTD18" project 생성 확인

 

이상 오늘의 삽질 일기를 마칩니다!

 

---

여기저기 삽질도 해보고

날려도 먹으면서

배우는 게

결국 남는거다

- Z.Sabziller

 

 

 

 

'쫄보의삽질' 블로그 탄생스토리가 궁금하다면:

Git push 취소 방법 (feat. '쫄보의삽질' 블로그 탄생 배경)