Fetch(GET,POST)

김태완·2021년 10월 17일
0

프론트엔드

목록 보기
4/30
  • 클라이언트단에서 http통신으로 요청 및 응답을 받는 함수
  • get호출방식을 디폴트로 가지고있다.

아래와같이 사용되며 url은 데이터를 받을 주소, option은 post호출시 사용

fetch(url, options)
	.then((response) => console.log(response))
	.catch((error) => console.log(error));2

GET 호출

fetch("https://jsonplaceholder.typicode.com/posts/1")
	.then((response) => response.json())
	.then((json) => console.log(json))

*response는 promise타입으로 반환되며 response.json()은 데이터를 자바스크립트 객체타입으로 반환해준다.

POST 호출

원격 API에서 관리하는 데이터를 생성해야한다면 POST방식을 사용,
fetch의 option인자에 headers옵션으로 JSON포맷을 사용한다고 알려주고
body옵션에 요청전문을 JSON 포맷으로 직렬화하여 전달.

fetch("https://jsonplaceholder.typicode.com/posts/1", {
	method : "POST",
	headers : {"Content-Type": "application/json",},
	body: JSON.stringify({
		title: "Test",
 		body: "I am testing!",
 		userId: 1,
	}),
})
.then((response) => response.json())
.then((json) => console.log(json))

참고 https://www.daleseo.com/js-window-fetch/

profile
프론트엔드개발

0개의 댓글