다음 두 요청의 차이를 알겠는가? 이 중 get요청만이 올바르게 작동한다.

get요청

const getUsersInfo = async(sort, page) =>{
    try {
        const params = {
            sort: sort,
            page: page,
        };

        const response = await api.get("/admin/users", {params: params});

        return response.data;
      } ...
}

patch요청

const suspendUser = async(status, userId)=>{
  try {
    const params ={
      status: status,
    };

    const response = await api.patch(`/admin/users/${userId}`,{params: params});

  } ...
}

두 요청 모두, 쿼리 파라미터로 인수를 전달하고 있다.

하지만, patch요청의 경우 파라미터를 적절히 전달하지 못하고 오류가 발생했다. (코드의 api는 axios로 만든 인터셉터다!)

분명히 필요 파라미터를 다 기입했는데 왜? get요청과 비교했을 때 차이가 없는데 왜? 오류가 발생하자 의문이 들었다.

필자는 patch요청 코드의 문제를 해결하기 위해 axios문서를 찾아보았다.

https://axios-http.com/docs/api_intro

위 목록은 axios에서 제공하는 요청 메소드이다.

차이를 알겠는가? 각 요청마다 전달 인수 수가 다르다.

다시 코드를 살펴보자.

1. get/delete(url[, config])

api.get("/admin/users", {params: params});

get 요청의 경우 쿼리 파라미터는 두 번째 인수인 config의 params를 통해 전달된다. 이는 URL에 쿼리 스트링으로 추가된다.

2. post/put/patch(url[, data[, config]])

// 잘못된 요청
api.patch(`/admin/users/${userId}`,{params: params});

반면 patch요청의 경우 두 번째 인수는 data영역에 사용된다. 이 값은 요청 본문에 포함되어 올바르게 전달되지 못했던 것이다.

이를 해결하기 위해선 쿼리 파라미터를 세 번째 인수로 전달함을 명시해줘야 한다.

// 올바른 요청
api.patch(`/admin/users/${userId}`, {},{params: params});

맺는 말

axios에서는 다양한 요청 메소드를 지원한다. 자주 쓰이는 get/delete/post/put/patch 함수에 차이가 있음을 이번 기회를 통해 알게 되었다.

본인은 이 차이를 알지 못해 오류를 찾아내는데 고생했다..😓

이 글을 읽은 여러분은 나와 같은 실수를 범하지 않았으면 했다!

이 밖에도 다른 라이브러리의 함수를 사용할 때 함수 시그니처를 찾아보고 숙지하는 습관을 들이자!

YU-Quiz / web

Axios 요청 간 쿼리 파라미터 처리 차이 #56

다음 두 요청의 차이를 알겠는가? 이 중 get요청만이 올바르게 작동한다.

1. get/delete(url[, config])

2. post/put/patch(url[, data[, config]])

맺는 말