[vuejs] axios get/post 요청에 따른 param 형식

마스터 테이블에서 A, B, C 데이터 3개를 이용하여 검색기능을 구현한다.

 

우선, 프론트쪽에서 단순 String 값이 아닌, Body형태로 데이터를 보내고 싶어서 백엔드에서 PostMapping을 이용하여 조회 API를 구현했다.

(참고로 GetMapping으로 구현하면 Body로 데이터를 보내도 포스트맨에서는 오류가 나지 않는다. 프론트에 갖다 붙이면 당연히 오류가 남

axios가 아닌 다른 통신 라이브러리에서는 GET & BODY 조합이 가능한 게 있어서 그렇다고 한다.)

 

여튼 얼레벌레 만들었음

프론트에 붙일 때, 주의해야할 것이 바로 param

 

get / post형식으로 보낼 때 약간의 차이가 있다.

 

 

< get >

  const { data } = await axios.get(process.env.VUE_APP_URL + '/api/ea/TbDdsM01/search', {
    params: {
      filter1: filters.clientNm,
      filter2: filters.cstNm,
      filter3: filters.cstCd,
    },
  });

요청 URL
http://localhost:8170/api/ea/TbDdsM01/search?filter1=&filter2=&filter3=1

 

get은 params이라는 이름의 객체 안에 데이터를 담아 보내야한다. 바로 객체를 보내면 request body라고 인식을 하여 에러가 난다.

get이므로 쿼리문자열 형식으로 요청 URL이 형성된다. 

서버에서는 해당 데이터를 request query로 받는다.

 

 

 

 

---

< post >

const searchData = async () => {
      const params = {
        filter1: filters.clientNm,
        filter2: filters.cstNm,
        filter3: filters.cstCd,
      };
      const { data } = await axios.post(process.env.VUE_APP_URL + '/api/ea/TbDdsM01/search', params);
      state.table.data = data;
    };

요청 URL
http://localhost:8170/api/ea/TbDdsM01/search

 

 

같은 듯 다른 듯 .. get은 params으로 한번 감싸서 보내고 post는 그냥 보내네 .. 그렇다고 합니다. (끝)

 

---

추가

 get 형식에서, 중첩 데이터를 보내고 싶을때엔 어떻게 할까

 

Axios에서는 이와 같은 상황을 위해 paramsSerializer 인터페이스를 제공한다.

데이터를 예쁘게 직렬화시켜주는 ... 어쩌고 (슬슬 쓰기 귀찮음

 

예를 들어 배열을 param으로 보내고 싶을때에는 아래와 같이 하면 된다.

const searchData = async (arr) => {
      const { data } = await axios.post(process.env.VUE_APP_URL + '/api/ea/TbDdsM01/search', {
        params : arr
      },
      paramsSerializer : params => {
         return qs.stringify(params, {arrayFormat: 'brackets'});
      }
      state.table.data = data;
 };

그럼 이렇게 예쁘게 정리된 쿼리 스트링 URL이 탄생한다.

http://localhost:8170/api/ea/TbDdsM01/search?arr[0]=apple&arr[1]=banana

서버에서 받을때에는 꼭 @RequestParam을 배열로 받도록 처리해주어야한다.

@GetMapping("/search")
public ResponseEntity<List<Post>> selectSearchTbDdsM01(@RequestParam(value="arr[]") String[] arrList)

 

하지만, 이렇게 요청 시 계속 옵션처리를 해주는 것은 귀찮기 때문에

Axios 인스턴스를 정의하는 곳에서 디폴트 처리를 해주면 된다.

const instance = axios.create({
    baseURL: process.env.VUE_IP,
    headers: {
        'Content-Type': 'application/json',
        "Authorization": ''
    },
    paramSerializer : (params) => {
    	return qa.stringify(params, {arrayFormat : 'brackets'});
    }
});

 

진짜 끝!