fetch() 함수 사용법(3)

fetch() 함수 - method가 get인데 parameter를 전달해야 하는 경우

get 예제에서 3이라는 user id를 path로 넘겨주었습니다. 그런데 path 말고 query string으로 넘겨줘야 할 수도 있습니다.

설명: 유저 정보를 가져온다.
base url: https://api.google.com
endpoint: /user
method: get
query string: ?id=아이디
응답형태:
    {
        "success": boolean,
        "user": {
            "name": string,
            "batch": number
        }
    }

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

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는 http 통신 요청과 응답에서 응답의 정보를 담고 있는 객체입니다. Response Object 라고 합니다.

그런데 console을 확인해보시면 백앤드에서 넘겨주는 응답 body, 즉 실제 데이터는 보이지 않을 것입니다. 즉 { success: true } 라는 JSON 데이터는 위의 코드로는 console에 찍히지 않을 것이라는 말입니다.

응답으로 받는 JSON 데이터를 사용하기 위해서는 Response Object 의 json 함수를 호출하고, return 해야합니다. 그러면 두 번째 then 함수에서 응답 body의 데이터를 받을 수 있습니다.

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));