react)fetch함수에 대해서 알아보자.

fetch함수. 프로젝트를 진행하면서 백엔드와 소통하기 위해 (정보를 받고 전달해주기 위해서 ) 많이 사용하게 되었다. 많이 사용하기는 하였지만 그냥 보고 옮겨적은 식으로 사용해서 정확하게 공부를 하고 다시 정리해보기로한다.

fetch함수의 기본

fetch('api 주소')
  .then(res => res.json())
  .then(res => {
    // data를 응답 받은 후의 로직
  });

기본함수는 이렇게 생겼다.
res가 같은 부분인줄 알았는데 다른 부분이랜다.
.then(res= > res.json())
.then(data =>{}) 이렇게 써도 된다.

fetch() 함수 - method가 get인 경우

정보를 받는 get을 사용한다. default method는 get이라서 생략도 가능하다.

fetch('https://api.google.com/user/3')
  .then(res => res.json())
  .then(res => {
    if (res.success) {
        console.log(`${res.user.name}` 님 환영합니다);
    }
  });

이런식으로 작성할수 있다.

fetch() 함수 - method가 post인 경우

post인 경우에는 fetch() 함수에 method 정보를 인자로 넘겨주어야 합니다.

백엔드에서 이런식으로 구성했다고 합니다 .

설명: 유저를 저장한다.
base url: https://api.google.com
endpoint: /user
method: post
요청 body:
    {
        "name": string,
        "batch": number
    }

응답 body:
    {
        "success": boolean
    }

그렇다면 프론트엔드에서는 이렇게 작성하게 됩니다 .

fetch('https://api.google.com/user', {
    method: 'post',
    body: JSON.stringify({
        name: "yeri",
        batch: 1
    })
  })
  .then(res => res.json())
  .then(res => {
    if (res.success) {
        alert("저장 완료");
    }
  })

요청 body에서 요청한 내용을 전달해주면 응답 body로는
어떻게 발생하게 되는지 나와 있는 것 같습니다.
그러면 프론트에서는 success 값을 통해서 이후 방향을 지정해 줄수 있습니다.

fetch() 함수 - res.json()의 의미

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

하지만 백엔드에서 응답body를 주지 않는 경우도 있습니다.
그럴때는 Response Object의 json()을 호출하면 에러가 납니다.

그렇때면 이렇게 수정해주면 됩니다,

//첫번째 then
.then(res => {
    if (res.status === 200) {
        alert("저장 완료");
    } else if (res.status === 403) {
        return res.json();
    }
  })

조금은 이해 완료 !