axios.js 배열 파라미터 전송시 [] 빼고 보내기

문제 제기

axios.get 을 통해 배열을 파라미터로 전송하면 아래와 같은 형태로 전송되게 된다.

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

스프링 controller를 사용하는 경우 이런 경우 `@RequestParam("key[]")` 와 같은 형태로 지정을 해 주어야 데이터를 정상적으로 받을 수 있다.

하지만 매번 이렇게 선언하기는 불편하다. 그렇다면 Axios 에서 파라미터를 key[]=value 형태가 아닌 key=value와 같은 형태로 보낼 수는 없을 까?

url?key=value1&key=value2

해결 방법

axios 에서는 옵션에 paramsSerializer function을 등록해 사용할 수 있다. 우선 1회용 사용방법은 아래와 같다.

jquery, 와 같은 라이브러리를 사용한다면 간단하게 다음과 같이 사용할 수 있다.

// https://api.jquery.com/jQuery.param/
axios.get(url, {
    params: {
      ids: [1,2,3]
    },
    paramsSerializer: params => {
      return jQuery.param(params)
    }
})

// https://www.npmjs.com/package/qs
axios.get(url, {
  params: {
    ids: [1,2,3]
  },
  paramsSerializer: params => {
    return qs.stringify(params, {arrayFormat: 'brackets'})
  }
})

위처럼 라이브러리를 사용하기 싫다면 아래와 같이 직접 paramsSerializer를 직접 구현해 사용해도 된다.

axios.get(url, {
	params: {...params, ...options},
    paramsSerializer = function(paramObj) {
        const params = new URLSearchParams()
        for (const key in paramObj) {
            params.append(key, paramObj[key])
        }

        return params.toString()
    }
})

get 요청을 할때마다 옵션을 넣어 주는 것도 여간 귀찮은 일이 아니다. 이런 경우 Axios 기본 설정으로 셋팅하면 매번 설정하지 않아도 된다.

axios.defaults.paramsSerializer = function(paramObj) {
    const params = new URLSearchParams()
    for (const key in paramObj) {
        params.append(key, paramObj[key])
    }

    return params.toString()
}