[react]API 통신

Kyungoh Kang·2020년 12월 21일
0

wecode15

목록 보기
16/20

Fetch()

fetch(API주소, {
	method: "GET"
	})
	.then(res=>res.json())
	.then(res=>//받은 res를 이용할 로직
          )

fetch함수는 자바스크립트 내장함수 Web API 중 하나로 api를 호출하고 데이터를 받아올 수 있게 해준다.
fetch는 첫번째 인자로 api 주소를 받고 두번째 인자로 메서드를 받는다. .then도 함수로 fetch의 반환값을 인자로 받는다(첫번째 then). 첫번째 then에서 받은 respnse를 json()을 이용해 json으로 바꿔주고 두번째 then의 인자로 넘겨준다. 여기서 받은 데이터를 처리할 로직을 입력한다. 참고로 es5로 바꿔줘도 된다.

fetch(API주소, {
  method})
.then(function(res){return res.json()})
.then(function(res){} )

fetch method

  1. GET
  • fetch의 기본 메서드이다. 생략해줘도 된다

2.Post

  • 포스트로 데이터를 받아올 때는 함수가 조금 달라진다.
fetch(API주소, {
	method: "Post",
  body: JSON.stringify({
  	key: value,
  })
})
  //뒤 .then 부분은 같음
  • body는 stringify로 JSON 형태로 변환해서 서버로 보냄

web api fetch로도 왠만한 기능은 다 구현할 수 있지만 axios 라이브러리도 많이 쓰인다고 한다.

0개의 댓글