Axios 쿼리 배열 직렬화

axios를 사용하여 카테고리 id 여러 개를 배열 데이터로 요청하는데 자꾸 400, 500 에러를 띄웁니다..😵
axios에서 제공하는 인터페이스로 해결하였는데 방법을 적어봅니다.

axios를 사용하여 GET 메서드에 배열을 파라미터로 전송하게 되면

const params = { categoryIds:[1, 2] };
axios.get(api, {params});

// http://api.com?categoryIds[]=1&categoryIds[]=2

이런 형식으로 전송이 됩니다.

url?key[]=value1&key[]=value2

하지만 이런 식으로 전달하게 되면 400에러 잘못된 요청이라는 오류가 나기 때문에 axios에서 제공하는 인터페이스인 paramsSerializer를 통해 배열 직렬화를 추가해주면 해결할 수 있습니다.

스프링 controller에서 @RequestParam("key[]")와 같은 형식으로 지정해주면 가능하다고 하는데,,이것은 서버 개발자 분에게 자세히 물어볼 예정입니다.(업데이트 예정) -> 업데이트 완료!

---

paramsSerializer 사용 방법

import qs from "qs";

axios.get(api, {
      params: {
        categoryIds: [1,2]
      },
    paramsSerializer: (params) => {
  return qs.stringify(params);
},
})

paramsSerializer를 사용하여 GET 호출을 하게 되면

url?key=value1&key=value2

이런 형식의 쿼리 스트링을 갖게 됩니다.

++ get 요청이 있을 때마다 매번 코드를 치지 않고 기본으로 세팅하는 방법도 있습니다.

import qs from "qs";
axios.defaults.paramsSerializer = params => {
  return qs.stringify(params);
}

---

✅ 서버에서의 RequestParam 처리 (22.02.23)

서버에서는 어떤 식으로 처리를 하게 되는 것인가 궁금한 나머지 서버 개발자 분에게 슬랙을 보내보았습니다.

친절한 답변이 왔지만..이해할 수 없어 찾아가서 다시 여쭤보니,

@RequestParam("strList") List<String> StrList
↕️
@RequestParam("strList[]") List<String> StrList

이런 식으로 param을 맵핑하는 과정에서 쿼리스트링의 키값 타입을 선언해주는 형식을 교체하는 것이었습니다.

참고📚

---

https://yamoo9.github.io/axios/guide/api.html#%EA%B5%AC%EC%84%B1-%EC%98%B5%EC%85%98
https://velog.io/@bang9dev/axios-with-qs