fetch 함수

들어가기에 앞서

백엔드로부터 데이터를 받아오려면 api를 호출하고 데이터를 응답받습니다. 이 때 자바스크립트 Web API fetch() 함수를 쓰거나 axios 라이브러리를 사용할 수 있습니다.

fetch() 함수 기본

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

주의할 것
-> 위 res 변수의 scope는 각 함수이므로 첫 번째 then 과 두 번째 then 안에 있는 res는 서로 다른 것 입니다 !

---

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

api 명세가 다음과 같을 때 fetch()를 어떻게 사용해야 할까?

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

정답

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

만약 리액트로 한다면 다음과 같습니다.

import React, { useEffect } from 'react';

function User(props) {
  useEffect(() => {
    const { userId } = props;
    fetch(`https://api.google.com/user/${userId}`)
      .then(res => res.json())
      .then(res => {
        if (res.success) {
	  console.log(`${res.user.name}` 님 환영합니다);
	 }
      });      
    }, []);
  ...
}

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

fetch()함수의 기본 method default값은 get이기 때문에 아무것도 작성하지 않아도 get으로 호출되는데, post인 경우에는 fetch() 함수에 method 정보를 인자로 넘겨주어야 합니다.

이번에는 아래와 같은 api 명세를 받았을 경우 입니다.

설명: 유저를 저장한다.
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("저장 완료");
    }
  })

1. 두 번째 인자에 method와 body를 보내주어야 합니다.
2. method는 post
3. body는 JSON형태로 보내기 위해 JSON.stringfy() 함수에 객체를 인자로 전달하여 JSON형태로 변환했습니다.

fetch 함수는 post로 데이터를 보낼 때 JSON.stringfy를 해주어야 합니다! 그러나 이를 더 편리하게 사용하기 위해 axios도 있다는걸 알아둡시다.

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

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

네트워크에서 JSON 파일을 가져와서 콘솔에 출력한다 가정했을 때,
fetch()는 가져오고자 하는 리소스의 경로를 나타내는 하나의 인수만 받습니다. 응답은 response 객체로 표현되며, 직접 JSON 응답 본문을 받을 수는 없습니다.

Response 객체 역시 JSON 응답 본문을 그대로 포함하지 않습니다. Response는 HTTP 응답 전체를 나타내는 객체로, JSON 본문 컨텐츠를 추출하기 위해서는 .json 메서드를 호출해야 합니다. json()은 응답 본문 텍스트를 JSON으로 파싱한 결과로 이행하는, 또 다른 프로미스를 반환합니다.