delete params보낼 때, 직렬화

이번에 회사에서 axios.delete() 를 하면서 마주쳤던 에러에 대해 설명하고자 한다

조건

백엔드에서 요구한 조건

• params의 형태

params = {
 item: [
   {key1: "value1"},
   {key2: "value2"}
 ]
}

items라는 배열이 객체로 구성되어 있다
(여러 행을 삭제하기 위해 이렇게 보내야 하는것 같다)

😥 문제

url 직렬화 문제에 봉착했다 ㅠㅠㅠㅠ

url?items[]=%7B%22key1%22:%22value1%22%7D&items[]=%7B%22key2%22:%22value2%22%7D

💡 해결

우리는 따로 라이브러리를 쓰지 않아서 직접 paramsSerializer 를 구현하였다

await axios.delete(url, {
    params,
    paramsSerializer: (params) => {
        return Object.keys(params).map((key) => {
            return params[key]
                .map(
                    (item) =>
                        `${key}=${encodeURIComponent(JSON.stringify(item))}`
                )
                .join('&');
        });
    },
});

url?items=%7B%22key1%22%3A%22value1%22%7D&items=%7B%22key2%22%3A%22value2%22%7D

쿼리 스트링이 너무 더러워져서 요청드리니까 body로 보내도 된다고 해주심!
이게 보안상으로도 유리하긴 하다 😊

---

👍🏻 axios.delete() body에 data 넣기

axios.delete() 는 request body를 지원하며 다음과 같이 두개의 매개변수를 허용한다

axios.delete(url[, config])

2번째 인자에서 data: {} 형태로 감싸서 보내주면 된다 😊

axios.delete(url, {
  data: 전달하려는 data,
 })