[JavaScript] fetch함수 - API 호출하기 (GET, POST)

공부하다가 필요할 것 같아 정리해 본 내용이다. 이렇게 되는 거구나~ 하고 이해하고 넘어가긴 했는데 혹시 모르니까...

기본 구문

fetch(url, options)	// 호출
  .then((response) => console.log("response:", response))	// 성공
  .catch((error) => console.log("error:", error));	// 실패

GET

GET 방식은 주로 READ 이므로 fetch, 즉 클라이언트는 요청만 하게 된다. 받는 응답만 다뤄주면 끝

fetch("url").then((response) =>	// 호출. 응답
	console.log(response)	// 출력
);

JSON 메서드

API에서 불러오는 데이터는 거의 JSON 형태이기 때문에 fetch에서도 JSON()메서드를 사용한다.

fetch('url')	// 호출 (API에 요청 전달)
	.then(res => res.json()) // 서버쪽에서 JSON을 응답으로 보냄
	.then(data => { // 받아온 걸 data에 저장
    	console.log(data)
    });

POST

POST 방식은 서버에 데이터를 보낼 때 사용하므로 fetch 즉 클라이언트가 요청 + 응답

method 에 POST 지정 (기본이 GET)

(header : 포맷 "Content-Type":)

body : 요청

fetch('url',  // 호출
	{
	method: "POST",
	body:  // 보낼 데이터
    })
    //서버응답
    .then((response) => console.log(response));

JSON 메서드

fetch('url',  // 호출
	{
	method: "POST",
	body:  // 데이터
    })
    //응답 - JSON
    .then((response) => response.json())
    .then((data) => {
            alert(data["msg"]);
          });