[JavaScript] API 모듈 재사용을 위한 조건부 key 처리

Moon Hee·2022년 10월 20일
0

트러블 슈팅

목록 보기
23/26
post-thumbnail

fetch로 get메서드를 사용할 때는 body가 있으면 요청이 보내지지 않는다.

export async function reqCart(method, product_id, quantity) {
    const res = await fetch(`${API_URL}/cart/`, {
        method: method,
        headers: {
            Authorization: `JWT ${window.localStorage.getItem("token")}`,
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            product_id: product_id,
            quantity: quantity,
            check: true,
        }),
    });
    return res;
}

method 자리에 GET과 POST를 넣어서 여러번 사용하게 하고 싶은데 이 상태로 get을 보내면 이런 에러가 나온다.

body 자체를 붙였다 뗐다 하는 방법을 찾아봤다.
처음에는 body 키 앞에 method === "POST"를 붙여봤는데 문법에 아예 안맞는다.
그래서 이 방법으로 해결할 수 있다.

...(method === "POST" && {
    body: JSON.stringify({
        product_id: product_id,
        quantity: quantity,
        check: true,
    }),
}),

다른 참조한 api 모듈에서는 method 별로 함수를 만들어서 사용했었는데, 이렇게 하면 get, post등 같은 API를 쓰는 메서드는 한꺼번에 묶을 수 있다. 간단하지만 유용한 것 같다.


참고한 블로그
https://ko.code-paper.com/javascript/examples-conditionally-add-key-to-object-javascript

profile
프론트엔드 개발하는 사람

0개의 댓글