axios post 통신

오늘은 axios post통신에 대해서 정리를 하려고 한다.

프로젝트를 진행하면서 매번 필수적으로 사용했었는데, 돌아보면 프로젝트 할 때마다 axios 양식을 다르게 작성한 것 같다.
그래서 오늘은 이러한 axios를 정리해 보려고 한다.

JBTI

    const handleSubmit = (e) => {
        e.preventDefault();

        axios({
            url: "/board",
            method: "post",
            data: {
                boardTitle,
                boardContent,
                memberAccount,
            },
        })
            .then((response) => {
                console.log(response);
                navigate("/board");
            })
            .catch((error) => {
                console.log(error);
            });
    };

PenpalPens

    const handleSubmit = (e) => {
        e.preventDefault();

        if (!dTitle || !dContent) {
            alert("제목과 내용을 모두 입력해주세요.");
            return;
        }

        axios({
            url: "/diary",
            method: "post",
            data: {
                dTitle,
                dContent,
                dDate,
            },
        })
            .then((response) => {
                console.log(response);
                navigate("/diary");
            })
            .catch((error) => {
                console.log(error);
            });
    };

JBTI와 PenpalPens를 진행할 때에는 axios안에 url method data를 적고
성공 실패 경우를 나눠 결과를 처리했었다.

Library

    const checkLogin = () => {
        axios.post('/loginAdmin', {
            id: id,
            pwd: pwd
        }).then(response => {
            console.log("데이터 확인 성공")
            navigate("/admin");
        }).catch(error => {
            console.log("데이터 확인 실패")
        })
    }

이번 Library에서는 더 간편하게 코드를 작성했는데, 기능적인 차이는 없다고 한다.
위에 2가지는 axios 객체 사용 방법이고
아래 Library는 axios.post 사용 방법이라고 한다.

차이는 크게 없고 그냥 간단한 요청에는 axios.post를 사용하는 것이 편리하다고 한다.
오늘을 마지막으로 post는 마무리하자