fetch ( )

fetch 함수

• fetch()함수는 브라우저에 내장된 함수로써, fetch함수를 사용하면 클라이언트 단에서 http요청을 할 수 있다.

fetch 함수 사용법

• fetch() 함수는 첫번째 인자로 API 주소를 받고 , 두번째 인자로 옵션 객체를 받는다. 그리고 reponse로 promise 타입의 객체를 반환한다.
  

• 데이터가 정상적으로 불러와 지면 reponse에 데이터가 전달이 되고, 데이터를 정삭적으로 불러오지 못하면 error 객체를 보내준다.

• option객체에는 HTTP 방식(get, post, put, delete), HTTP 요청 헤더(headers), HTTP 요청 바디(body) 등을 입력할 수 있다.

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

get

• http 방식 중 하나인 get은 API를 호출하여 데이터를 가져올 때 쓰인다.

• fetch함수에 http요청 메서드를 따로 지정해 주지 않으면 기본적으로 get으로 동작하기 때문에 따로 http 요청 메서드로 get을 지정 해 주지 않아도 된다.

• 또한 단순히 데이터를 가져오는 것이기 때문에 options객체를 함께 보내줄 필요가 없다.

• 추가적으로 fetch함수를 통해 가져오는 데이터는 보통 json형태를 가진다.
  따라서 json() 메서드를 사용하여 json형태의 데이터를 자바스크립트 객체로 변환해 주는 과정이 필요하다.

• 자바스크립트 객체로 변환이 되면 해당 데이터가 data에 담기고, 해당 데이터를 사용하면 된다.

fetch("API 주소")
 .then((response) => response.json())
 .then((data) => console.log(data));

post

• post방식은 API에 데이터를 생성할때 사용할 수 있다. 어떤 데이터를 생성할 것인지를 같이 보내줘야 하기 때문에 요청 바디도 함께 보내주어야 한다.

• method 옵션을 POST로 지정해주고, headers에 JSON 포멧을 사용한다고 알려준 다음, 요청 바디를 JSON 포멧으로 직렬화화여 body 옵션에 설정해줘야 한다.

• JSON 포멧으로 직렬화 할때는 JSON.stringify를 사용하는데, 이걸 해주는 이유는 get으로 데이터를 불러올 때 받아온 JSON데이터를 자바스크립트 객체로 변환을 해준 것 처럼, 데이터를 보낼 때 자바스크립트 객체를 문자열로 변환하여 JSON포멧으로 데이터를 보내줘야 하기 때문이다.

• POST,즉 데이터가 정상적으로 등록이 되면 담긴 데이터가 reponse에 전달이 되고, 다시 json()을 통해 자바스크립트 객체로 변환을 한 다음 출력해 보면 어떤 데이터가 담겼는지 확인할 수 있다.

fetch("API 주소", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "post",
    body: "posting ...",
    userId: 1,
  }),
})
  .then((response) => response.json())
  .then((data) => console.log(data));

put

• post가 데이터를 생성하는 것이라면 put은 데이터를 생성하고, 수정도 할 수 있는 방식이다.

• post와 put의 가장큰 차이점은 아래와 같다.
  예를들어 post방식으로 A라는 데이터를 3번 전달하면 서버에 3개의 A가 만들어 진다.
  하지만 put을 사용하면 첫번째 요청에서 A라는 데이터가 만들어지면 A라는 데이터가 이미 존재하기 때문에 2,3번째 요청에서는 A라는 데이터를 만들지 않는다.

fetch(" API 주소", {
  method: "PUT",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "PUT",
    body: "PUT ...",
    userId: 1,
  }),
})
  .then((response) => response.json())
  .then((data) => console.log(data));

delete

• delete는 데이터를 삭제할 때 사용하고, get과 마찬가지로 options객체를 전달하지 않아도 된다.

fetch("API 주소", {
  method: "DELETE",
})
  .then((response) => response.json())
  .then((data) => console.log(data));