React - Fetch() / GET호출 / POST 호출

fetch 란 ❓

• 자바스크립트 내장 객체

• fetch 함수는 window.fetch()로 사용되기도 한다.

• 첫번째 인자로 API , 즉 url 주소를 받고 두번째 인자로 옵션 객체를 받게되는데
  옵션 객체에는

  1. HTTP 방식(method)
  2. HTTP 요청 헤더(header)
  3. HTTP 요청 전문 (body)
     를 설정해 줄 수 있다.

• Promise 타입의 객체를 반환한다.
  API호출이 성공했을 경우(then)에는 응답(response)객체를 resolve 하고
  실패했을 경우(catch)에는 error로 객체를 regect한다.

GET 호출

  fetch("https://jsonplaceholder.typicode.com/posts/1").then((reponse) =>{
    console.log(succese);
  });

위는 url을 통해 get 호출을 진행하는 코드이다

Response {status: 200, ok: true, redirected: false, type: "cors", url: "https://jsonplaceholder.typicode.com/posts/1", …}

와 같은 반환값을 볼 수 있다.

• status: http 상태 코드 (예:200 - 성공 , 404 - not found)
• ok: 불린 값. http 상태 코드가 200과 299사이일 경우 true
  를 의미 한다.

해당 코드에서 쓴것 처럼 GET 호출 값을 json()메소드를 사용해서 반환하게 되면

{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit↵suscipit recusandae consequuntur …strum rerum est autem sunt rem eveniet architecto"
}

처럼 JSON 포멧의 응답을 자바스크립트 객체로 변환하여 얻을 수 있다.

POST 호출

POST 호출 시에는 option 을 지정해줘야 한다.

fetch("https://jsonplaceholder.typicode.com/posts", {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
    },
    data: JSON.stringify({
        title: "TEST",
        body: "TEST",
    }),
}).then((response) => console.log(response));

결과 값으로 201 status 값을 확인 할 수 있다.

Response {status: 201, ok: true, redirected: false, type: "cors", url: "https://jsonplaceholder.typicode.com/posts", …}

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

GET호출 처럼 json()메소드를 사용해서 객체 형태로 값을 얻을 수 있다.

{
    "id" : 101
}

---

📜 참고자료

fetch()를 이용한 api 호출
fetch()