[JavaScript] Axio GET에서 파라미터로 배열을 전송하는 방법

문제상황

Axios에서 GET 메소드로 아래와 같은 배열을 전달하면, request URL은 어떻게 될까?

import axios from 'axios';

const arrayToSend = [1, 2, 3, 4, 5];

axios
  .get("https://example.com/api/data", {
    params: { test: arrayToSend }
  })
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });

 

https://example.com/api/data?test=[1,2,3,4,5]?

 

 

위 CodeSandbox로 앱을 열어보면, 네트워크 탭에서 확인할 수 있듯이 아래와 같은 Request URL이 생성된다.

https://example.com/api/data?test[]=1&test[]=2&test[]=3&test[]=4&test[]=5 

 

spring controller에서는 `@RequestParam("key[]")`와 같은 어노테이션을 사용하면 위와 같은 request도 정상적으로 처리가 가능하다고 한다.

 

만약, API가 이미 나와있는 상황이라면?, Request에서 key=value 형태로 처리는 불가능할까?

 

해결방법

qs 이용하기

import qs from "qs";

const arrayToSend = [1, 2, 3, 4, 5];

axios
  .get("https://example.com/api/data", {
    params: { test: arrayToSend },
    paramsSerializer: (params) => {
      return qs.stringify(params, { arrayFormat: "comma" });
    }
  })
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });

 

위와 같이 간단하게 qs 라이브러리를 사용하면, 아래와 같이 Request URL이 치환된다.

https://example.com/api/data?test=1%2C2%2C3%2C4%2C5

( = https://example.com/api/data?test=1,2,3,4,5 )

 

qs 이용하기

라이브러리를 사용하지 않고 아래와 같이 paramsSerializer를 직접 구현해서 사용하는 방법도 있다.

import axios from 'axios';

const arrayToSend = [1, 2, 3, 4, 5];

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

  return params.toString();
};
axios
  .get("https://example.com/api/data", {
    params: { test: arrayToSend }
  })
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });

qs를 이용한 방법과 동일하게 아래와 같이 Request URL이 생성된다.

https://example.com/api/data?test=1%2C2%2C3%2C4%2C5

 

---

Reference

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