[ajax, axios] Get호출 시 배열(list) 파라미터 전달하기

Get조회에서 서버에 배열로 보내야 할때, 예를들어 다음과 같이 id가 있어 서버에 조회요청을 해야할 때다.

ids: [215, 217, 218, 219, 240, 241, 242, 243, 244, 245, 246, 247, 248, 249, 250, 251, 252, 253, 254, 255, 256, 257, 258, 259, 260, 261, 262, 263, 264, 265, 266, 267, 268, 269, 270, 271, 272, 273, 274, 275, 276, 277, 278, 279, 280, 281, 282, 283, 284, 285, 286, 287, 288, 289, 227]

 

이때 axios를 사용해 get을 호출을 했다. 그 코드는 다음과 같다.

...
const ids = [215, 217, 218, 219 ...]

const searchParam = {
    ids: ids
}

const url = "/api/search/ids";
    return axios.get(url, {params: searchParam})
        .then((res) => {
            return res.data.value;
        })
...

 

수행결과 400 에러가 발생하는데, 로그를 보면 아래와 같다

 

파라미터부분을 보면 이상하다. ids라는 이름이 ID의 갯수만큼 달려있다.

크롬의 Network를 보면 요청한 방식에 대해 알 수 있는데 결과만 보면 다음처럼 되어있다.

 

ids 항목에 배열로 들어가길 바랬던 것이지, 위와같은 형태가 되길 바란것은 아니었다. 백엔드에도 List<Long> 형태로 받기로 하였기 때문에 문제가 되었다.

 

그래서 파라미터를 전송하기 전에 리스트형태(,구분)로 전달하면 되겠다 싶어 join을 이용했다.

...
const searchParam = {
    ids: ids.join(",")
}
...

 

그리고 실행을 해보면 내가 원하는 형태의 요청셋이 완성됨을 확인할 수 있었다.

 

 

끝.