JSON Fetch 사용하기

Fetch 

• HTTP 파이프라인을 구성하는 요청 & 응답 등의 요소를 JS에서 접근하고 조작할 수 있는 인터페이스 제공
• 네트워크 리소스를 비동기적으로 가져옴
• XMLhttpRequest 에 대한 좋은 대체제

요청

fetch("https://example.com/movies.json")
            .then((res) => res.json())
            .then((data) => console.log(data));

• 응답은 Response 객체로 표현되며, 직접 JSON 응답 본문을 받을 수는 없다.
• Response는 HTTP 응답 본문을 그대로 포함하지는 않음 => Response는 HTTP응답 전체를 나타내는 객체이기 떄문
• JSON 본문 컨텐츠를 추출하기 위해서는 json() 메소드를 호출해야함.
• json()은 응답 본문 텍스트를 JSON으로 파싱한 결과로 이행하는, 또 다른 프로미스를 반환함.

fetch()의 첫번째 인자

fetch(res)
fetch(res,options)

 

• 접근하고자 하는 주소
• fetch() 호출 시 브라우저는 네트워크 요청을 보내고 Promise가 반환
• 반환되는 Promise는 fetch()를 호출하는 코드에서 사용
• res의 속성
  • res.status - 응답의 HTTP 코드
  • res.ok - 응답 상태가 200과 299사이에 있는 경우 true
  • res.headers - http 헤더
• res의 메서드
  • res.json() - 응답을 JSON 형태로 파싱
  • res.text() - 응답을 읽고 텍스트를 반환

fetch()의 두번째 인자

options 

• 요청에 내가 적용하길 원하는걸 커스텀 할 수 있는 객체들 포함한다
• method , headers, body, mode, 

• method: req 메서드 (GET, POST) =>
  • GET: 존재하는 자원을 요청(fetch함수는 GET이 디폴트)
  • POST: 새로운 자원 생성 요청 
  • PUT: 존재하는 자원 변경 요청
  • DELETE : 존재하는 자원 삭제 요청

1. GET 

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

2. POST: 

• form 등을 사용해서 data를 보낼때, 그 양이 많거나 비밀 번호 같은 개인정보는 POST 메서드 사용
• header 옵션으로 JSON포맷 사용한다고 알려줌. (json 형식을 알려주지 않으면 서버에서 못읽는 경우 생김)
• body 옵션으로 요청 전문을 JSON 포맷으로 넣어줌.  

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "Test",
    body: "I am testing!",
    userId: 1,
  }),
})
  .then((response) => response.json())
  .then((data) => console.log(data))
  
  
  // body 부분에 JSON.stringify 은 JSON.stringify(data) 와 같이 작성했을떄 data를 JSON 문자열로 반환하는것을 의미함

3. PUT: method만 PUT으로 둔다는걸 빼면 POST와 비슷

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

4. DELETE: 보낼 데이터가 없기 때문에 headers, body 옵션 없음

fetch("https://jsonplaceholder.typicode.com/posts/1", {
  method: "DELETE",
})
  .then((response) => response.json())
  .then((data) => console.log(data))