[Javascript] 자바스크립트 Fetch함수로 백엔드와 통신하기

개요

프론트엔드가 백엔드와 협업할 때, 자바스크립트 fetch함수를 쓰거나 axios를 사용하여 api를 호출할 수 있다. 

 

설명

기본 구조는 다음과 같다.

1. api 주소를 써준다.

2. HTTP METHOD를 써준다. 

이때, GET은 method를 따로 써주지 않아도 된다. 

3. header, body가 있으면 써준다.

4. .then()으로 다음 로직을 써준다.

fetch("api주소", {
            method: "POST", // HTTP Method(post, put, delete, get)
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({name : cowboysj})
        })
            .then((response) => response.json()) // 서버에서 받은 응답을 JSON 형태로 파싱
            .then((data) => {
                console.log(data);
            })
            .catch((error) => {
                console.error("오류 발생", error); // 요청이 실패하면 에러를 콘솔에 출력
            });
    }

fetch 함수에서 사용하는 HTTP Method에는 네 가지가 있다.

- GET : 조회 (데이터를 가져올 때 사용한다.) 

- POST : 등록(데이터를 새로 등록할 때 사용한다.)

- PUT : 수정(전체 데이터를 수정할 때 사용한다.)

- PATCH : 수정(일부 데이터를 수정할 때 사용한다.)

-DELETE : 삭제(데이터를 삭제할 때 사용한다.)