fetch

Steve·2022년 2월 17일
0
post-custom-banner

crud 백엔드와의 통신을 할 때 RESTful API를 이용해야한다.
get은 정보를 가져오는거다보니 간단.
나머지는 몇개 더 붙여야하지만 또 간단하다.

1. get은 디폴트. fetch의 인자로 url만 작성해주면 된다.

fetch('https://reqres.in/api/users')
.then(res=> res.json()) // 서버와 클라이언트간의 통신은 JSON형식으로 해준다.
.then(res=> console.log(res));

2. post는 fetch의 2번째 인자로 method,header,body를 넣어준다.

fetch('https://reqres.in/api/users', {
method: 'POST',
header : {
'Content-Type':'application/json'
}
body : JSON.stringify({ // 서버에 정보를 보낼때 JSON을 String 형식으로 변환해서 보내준다.
  //When sending data to a web server, the data has to be a string.(W3S)
//서버로 데이터 전송할 땐 문자열이여야만 한다.
	name : 'user 1'
	})
})
.then(res => res.json())// 응답 객체에서 접근 하기 위해 JSON형식으로 바꿔줘야한다. 
.then(console.log);

첫 번째 then 함수에 전달된 res는 http통신 요청과 응답에서 응답의 정보를 담고 있는 객체 이다. (Response Object)
응답으로 받는 JSON 데이터를 사용하기 위해서는 Response Object 의 json 함수를 호출하고, return 해야합니다. 그러면 두 번째 then 함수에서 응답 body의 데이터를 받을 수 있습니다.

*참고
When receiving data from a web server, the data is always a string.
Parse the data with JSON.parse(), and the data becomes a JavaScript object.
"서버로부터 데이터를 받을땐 항상 문자열로 받는다.
JSON.parse()를 사용해서 jS객체로 만들어야 우리가 이용할 수 있따."

profile
Front-Dev
post-custom-banner

0개의 댓글