[Vue] options api로 웹사이트 만들기 - 6. axios 다중요청해서 동시에 리스트 뿌려주기

시작하기에 앞서, 우리가 만들고 있는 웹사이트의 완성본은 이렇게 생겼습니다! :  https://youthful-heyrovsky-6bcc71.netlify.app/ 

vue2-options

코드 전체를 다 적기보다는 필요한 부분만 잘라서 설명하기때문에, 전체코드가 궁금하신 분은 : https://github.com/yoycode/vue2-options 를 참고해주세요!

GitHub - yoycode/vue2-options

저번 글에서는 v-if를 통해 조건부렌더링을 해봤는데요. 이제 얼추 가운데에 뿌려주는 글 목록은 다 뿌려준 것 같으니 왼쪽 섹션에 유저리스트도 함께 뿌려줘보겠습니다. 

1.  axios 다중요청 (multi-request)

우리는 이미 App.vue가 created될때 글 리스트를 api로 불러오고 있는데요, 태그 리스트를 불러오는 api도 같이 적어주고 싶은 느낌이 듭니다.  물론 각각의 api를 axios.get.then.catch 해줘도 되지만 그렇게 되면 api가 하나가 끝나야 그 다음것이 실행되기 때문에 수많은 api를 호출해야할 경우 웹이 느려질 수 있습니다. 물론 요청 순서대로 결과물을 받겠다는 보장이 필요한 경우는 이와 같이 처리해줄 수 있겠지만, 요청을 받아오는 순서가 상관이 없는 경우라면 axios.all과 axios.spread를 이용해 한번에 요청을 받아올 수 있습니다.

(참고 .then( ).catch( )가 아닌 async과 await을 이용할 때는 Promise.all 를 참고하세요 : https://imagineu.tistory.com/36)

[ES6+] Promise와 then, catch, finally, all, race

axios.all( ) 안에 요청을 배열형태로 넣어주고,
.then( )과 .catch( ) 안에서는 axios.spread( callback ) 을 넣어줍니다. 콜백함수의 파라미터 순서는 axios 요청 순서입니다.

2. vuetify의 v-list로 뿌려주기 

console.log()나 <template>의 {{ }} 등으로 요청이 잘 받아와지는 것을 확인했다면, 메인의 왼쪽 섹션에 태그들을 예쁘게 뿌려줍시다. 오른쪽섹션은 필요없으니 지워주고 남은 v-col의 sm을 조절해줍니다.

그리고 유저 목록은 vuetify의 v-list를 사용해서 뿌려줘봤습니다. ( https://vuetifyjs.com/en/components/lists/ )

오늘은 간단하게 axios의 다중요청을 통해 리스트 두개를 동시에 뿌려줘보았습니다! 이어서 다음글에서는 사용자를 누르면 사용자가 작성한 글만 보여주고, 태그를 누르면 해당 태그가 있는 작성글만 뿌려줘보겠습니다ㅎㅎ

다음글 : https://imagineu.tistory.com/66