[TIL] React 입문 (with fetch ) - 2

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

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

첫 번째 then의 res가 어떤 값이 들어올 때 리턴하는가? console.log를 찍어봅니다.

fetch('https://api.google.com/user', {
    method: 'post',
    body: JSON.stringify({
        name: "yeri",
        batch: 1
    })
  })
  .then(res => {       // 첫 번째 then
    console.log(res);  // 어떤 값이 나오는지 확인해보세요. 실제 잘 작동하는 api 주소가 필요합니다.

    return res.json();
  })
  .then(res => {       // 두 번째 then
    if (res.success) {
        alert("저장 완료");
    }
  })

fetch()함수 - 첫 번째 then 함수에 추가되는 로직

fetch() .then() .then()형태만 있었지만 백앤드에서 응당 body를 안 주는 경우도 많습니다.
응답 body로 JSON 데이터를 주지 않는데 프론트에서 Reaponse Object의 json()을 호출하면 에러가 납니다.

설명: 유저를 저장한다.
base url: https://api.google.com
endpoint: /user
method: post
요청 body:
    {
        "name": string,
        "batch": number
    }
응답 body:
    1. 제대로 저장했으면 status code를 200 전달. 응답 body는 없음
    2. 권한 오류가 생기면 status code를 403으로 전달하고. 응답 body는 아래와 같음
        {
            success: false,
            message: "권한이 없습니다"
        }

위의 상황일 때 fetch()를 구현하는 방법

fetch('https://api.google.com/user', {
    method: 'post',
    body: JSON.stringify({
        name: "yeri",
        batch: 1
    })
  })
  .then(res => {
    if (res.status === 200) {
        alert("저장 완료");
    } else if (res.status === 403) {
        return res.json();
    }
  })
  .then(res => {
    console.log("에러 메시지 ->", res.message);
  })