TIL. Vue.js [서버통신-axios/async/await]

Vue.js 에서는 어떤 형태로 API를 붙일까??

가장 흔히 쓰는 방법은 axios를 활용하여

axios.get('/api/data').then(res => {
  console.log(res.data)
})

위와 같은 형태로 데이터를 불러오는 것이다.

이 방법은 추후에 다시 블로깅 하도록 하고, 이번에는 게시판을 만들면서 사용한 방법에 대해서 적어보겠다.

API 통신 코드

src > api > index.js

import axios from 'axios'

//instance 생성 후 => 사용자 정의 인스턴스 기본 설정
const instance = axios.create({
    baseURL: "http://192.168.0.44:8081/",
});

//get
export const submitWoImg = {
    list(bodyFormData) {
        return instance.get('api/notice/insert', bodyFormData)
    }
}

//post
// 1. 데이터를 받아온 후 bodyFormData에 요청데이터 담기
export const submitWImg = {
    list(title, type, img, tts) {
        console.log(title, type, tts)
        var bodyFormData = new FormData();
        bodyFormData.set('title', title)
        bodyFormData.set('noticeType', type)
        bodyFormData.set('downloadFile', img)
        bodyFormData.set('tts', tts)
        return instance.post('api/notice/insert', bodyFormData)
    }
}


// 2. 요청데이터가 담긴 bodyFormData 
export const listsPage ={
    list(bodyFormData){
        return instance.post("api/notice/list", bodyFormData)
    }
}

src > views > PostModifyDel > PostModifyDel.vue

<script>
...

  import { listsPage } from "../../../api/index";

...

  methods: {
    async fetchData() {
      const bodyFormData = new FormData();
      // 검색요청 페이지
      bodyFormData.append("requestPage", this.pageNum);
      // 카테고리 종류
      bodyFormData.append("noticeType", this.category);
      // 페이징 요청 사이즈
      bodyFormData.append("pageSize", this.PAGESIZE);
      const res = await listsPage.list(bodyFormData);
      this.gotLists = res.data.result;
      // 마지막 offset
      this.totalNoticeCnt = res.data.result[0].noticeCnt;
    },

1. "api폴더" 를 따로 생성하여 "index.js" 를 생성한다.

API 통신을 담당하는 파일을 따로 생성해주므로써 통신과 관련된 유지보수 측면 과 가시성 이 좋아진다.

2. list() 불러오기

"PostModifyDel > PostModifyDel.vue" 에서 " api > index.js" 내의 list()를 사용하기 위해서 에서 내가 원하는 방식의 list() 를 선언한 변수를 import해온다.

3. axios

위의 코드와는 달리 axios 를 통해 Promise기반의 비동기 통신을 할 경우,
처음 날린 요청(Request)의 응답값을 이용해서 다음 요청을 보내야할 상황에서 어쩔 수 없이 콜백 지옥이 발생된다.

이를 axios 인스턴스와 async/await 을 사용하여 콜백함수의 콜백지옥을 벗어날 수 있다. ( -> PostModifyDel.vue)

4. async/await

먼저 함수 내에서 await 을 사용하기 위해 함수앞에 async 를 넣어준다.
await 을 사용하여 요청을보내면 응답받은 값을 같은 스코프 내에서 처리가 가능해져서
훨씬 보기도 편하고, 코드도 간결해지고 콜백 지옥 현상도 발생하지 않는다.

5. FormData 생성 (FormData())

다음의 코드를 통해서 FormData 객체를 만든다.

const bodyFormData = new FormData();

(백엔드에서 formData를 원했기에 bodyFormData formData를 만들어주었다.)

bodyFormData라는 FormData에 request값들이 key:value 형태로 담길 것 이다.

6. append()

bodyFormData.append('key', 'value');

위의 코드로 request값들이 key:value 형태로 bodyFormData에 담는다.

7. bodyFormData 보내기 + 응답받은 값 이용하기

 const res = await listsPage.list(bodyFormData);

await 을 사용하여 요청을보내면 응답받은 값을 같은 스코프 내에서 처리가 가능하기 때문에

" api > index.js"의 listsPage의 list()에 보냄과 같이, 응답받은 값을 res라는 변수로 선언해줄 수 있기에 응답받은 값을 바로 이용할 수 있다.

note!

한가지 문제라면 async/await 에서는 요청을 한번에 모아서 보내는 방식이라 catch부분의 에러의 구분 이 되지않는다.

즉, try 안에서 여러개의 요청을 보낼 때, 이중 어떤것이라도 실패한다면 catch로 빠지기 때문에
요청에 실패한다면 디버깅이 어렵다 는 단점 이 있다.

위의 방법으로 유지보수와 가시성 모두를 잡은 API 통신을 할 수 있다.