axios GET 요청시 배열 params '[]' 없이 날리기

GET 요청시 parmas에 배열을 보내는 부분이 있어서 ,해당 요청 url을 확인했더니 

//admin_api/users?role[0]=MANAGER&sort=createdAt:desc&offset=0&limit=15

이런식으로 role[0] 이상한 값이 들어있다.

 

서버에서 원하는 url은 다음과 같은데..

/admin_api/users?role=MANAGER&role=ADMIN&sort=createdAt:desc&offset=0&limit=15

이런식으로 '&'형태로 나열되는 것! 

 

서버에서는 배열타입을 정의했기에 프론트에서 배열을 보내도 주소값이 이상하지 않게 처리를 해줘야한다!

즉,query string 처리를 해줘야하는 것이다.

 

1. qs 설치

query string 관련 형식 맞추기 편리하게 함수 제공하는 라이브러리

 

2. axios paramSerializer 세팅

현재 api/instance 파일에서 baseAjax로 axiosInstance 를 만들어서 사용하고 있다. 상수 baseAjax에 params의 옵션값을 세팅해줬다. 

export const baseAjax = axios.create({
  baseURL: API_BASE_URL,
  timeout: 3000,
  headers: {
    "Content-Type": "application/json",
  },

  paramsSerializer(params) {
    return qs.stringify(params, { arrayFormat: "repeat" });
  },
});

 

 

qs.stringify(params, { arrayFormat: "repeat" })라는 옵션이 배열 파라미터의 쿼리스트링을 Stringifying 하겠다는 옵션이다.

 

이 외에도 'repeat' 대신에 'comma', 'brackets'을 넣어 사용하기도 한다.