Fetch API 란

Fetch API란?

Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있습니다. Fetch에는 일반적인 오브젝트로로 Request 와 Response (en-US)가 포함되어 있습니다. fetch()는 Promise객체를 반환합니다.

AJAX

• Ajax(Asynchronous Javascript And Xml)는 비동기식 자바스크립트 통신을 의미한다. 브라우저가 가지고 잇는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로고침 하지않고 페이지의 일부만을 위한 데이터를 로드하는 기법이다.
• 비동기적 자바스크립트 동작을 하는 기술들을 통틀어 AJAX라고 부른다.
• 예전에는 XMLHttpRequset API를 이용하여 구현했지만, 불편함을 느낀 사용자들이 JQuery를 통해 구현하기 시작했고, 그 이후 fetch API ES6(ES2015) 표준으로 등장하면서 'fetch API'와 'axios'를 통해 구현하는 것이 일반적인 방법이 되었다.

 

axios에 대한 설명과 fetch api와의 차이에 대한 설명 : https://sjoongh.tistory.com/15

Fetch 사용법

fetch() 함수는 첫번째 인자로 URL, 두번째 인자로 옵션 객체를 받고, Promise 타입의 객체를 반환합니다. 반환된 객체는, API호출이 성공했을 경우에는 응답(response) 객체를 resolve하고, 실패했을 경우에는 예외(error) 객체를 reject 한다.

fetch(url, options)
    .then((response) => console.log("response:", response))
    .catch((error) => console.log("error", error));

옵션 객체에는 HTTP(method), HTTP 요청 헤더(headers), HTTP 요청 전문(body)등을 설정해줄 수 있습니다. 응답(response)객체로부터는 HTTP 응답 상태(stauts), HTTP 응답 헤더(headers), HTTP 응답 전문(body)등을 읽어올 수 있습니다.

참고로 fetch() 함수는 엄밀히 말해, 브라우저의 window 객체에 소속되어 있기 때문에 window.fetch()로 사용되기도 한다.

Fetch : Promise 기반 (Promise라는 객체를 사용)

promise란 : 비동기 처리를 위해 && 서버에서 받아온 데이터를 화면에 표시하고 싶을 때 서버로부터 데이터를 요청 시 데이터를 받아오기전에 마치 데이터츨 다 받아온 것 처럼 화면에 데이터를 표시하려고 하면 오류가 발생하거나 빈 화면이 뜬다, 이를 해결하기 위한 방법 중 하나 --> promise 의 상태(states)를 기본적으로 알고 있어야함, 대기-이행-실패 총 3가지 순서

promise와 비동기처리 & 콜백함수 참고 : https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

1. GET(Read)
2. POST(Create)
3. DELETE(Delete)
4. PUT(Update)

GET 방식

fetch() 함수는 default method가 GET방식이기 때문에 옵션인자를 지정해주지 않아도 상관이 없습니다.

fetch("URL주소")
  .then((response) => response.json())
  .then((data) => console.log(data));

응답 객체를 통해 응답 상태가 200 OK인 것을 금방 알 수 있습니다.

Response {status:200, ok:true, redirected: false, type: "cors", url: "URL주소", ...}

대부분의 REST API들은 JSON 형태의 데이터를 응답하기 때문에, 응답(response)객체는 json() 메서드를 제공합니다.
단순히 특정 API에 저장된 데이터를 보여주는 웹페이지나 애플리케이션에서는 GET방식의 HTTP 통신으로 충분하다.

POST 호출

원격 API에서 관리하고 있는 데이터를 생성해야 한다면 요청 전문을 포함할 수 있는 POST방식의 HTTP 통신이 필요하다.

method 옵션을 POST로 지정해주고, headers옵션을 통해 JSON포멧을 사용한다고 알려줘야 하며, 요청 전문을 JSON포멧으로 직렬화하여 가장 중요한 body옵션에 설정해준다.

fetch("URL주소", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "Test",
    body: "I am testing!",
    userId: 1,
  }),
})
  .then((response) => response.json())
  .then((data) => {
      if (res.success) {
    console.log(data)); 
    }
   })

• POST는 응답 코드가 201 Created인 것을 알 수 있다.
• 성공에 대한 모든 상태 코드를 200으로 응답해도 크게 상관없다. (200 상태 코드는 클라이언트에게 요청이 성공했다는 것을 응답하는 기능을 갖기 때문에)

Response {type: "cors", url: "URL주소", redirected: false, status: 201, ok: true, …}

• 또한 응답 객체의 json()메서드를 호출하면 응답 전문을 객체 형태로 얻을 수 있다.

PUT, DELETE 호출

PUT 방식은 method 옵션만 PUT으로 설정한다는 점을 제외하고 POST방식과 매우 흡사하다.

fetch("URL주소", {
  method: "PUT",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "Test",
    body: "I am testing!",
    userId: 1,
  }),
})
  .then((response) => response.json())
  .then((data) => console.log(data));

res.json()의 의미

    fetch('URL주소')
      .then(res => {
        console.log(res);
        return res.json();
      })
      .then(data => {
        console.log(data);
        this.setState({
          feedData: data,
        });
      });
  }

첫번째 .then의 res

• http 통신 요청과 응답에서 응답의 정보를 담고 있는 객체 Response Object
• 실제 데이터는 보이지 않기 때문에 응답으로 받는 JSON 데이터를 사용하기 위해서는 Response Object의 json 함수를 호출하고 return 해야 한다.

 

두번째 .then의 data

• 첫번째 .then 함수에서 응답 body의 데이터(data)를 받아서 사용할 수 있다.

 

응답 body를 안 주는 경우

• res.status 응답 코드로 확인할 수 있다.

 

사용성 개선

fetch() 함수가 반복되는 것을 방지하기 위해 별도의 함수나 모듈로 빼서 사용할 수 있다.
프로젝트 상황에 맞게 async/await 키워드를 이용하여 HTTP 방식별로 비동기 함수를 작성하고 모듈화하여 사용

async function post(host, path, body, headers = {}) {
  const url = `https://${host}/${path}`;
  const options = {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      ...headers,
    },
    body: JSON.stringify(body),
  };
  const res = await fetch(url, options);
  const data = await res.json();
  if (res.ok) {
    return data;
  } else {
    throw Error(data);
  }
}

post("jsonplaceholder.typicode.com", "posts", {
  title: "Test",
  body: "I am testing!",
  userId: 1,
})
  .then((data) => console.log(data))
  .catch((error) => console.log(error));

fetch is not defined

fetch는 브라우저에 내장된 함수이기 때문에 html에 src로 연결하고 해당 웹페이지에서 확인하면 제대로 출력이 된다.
그러므로 node에서 실행하기 위해서는 라이브러리를 사용해야 한다.

then 함수

동기함수 : 코드들이 위에서 아래로 순차적으로 실행되며 하나의 코드가 종료되지 않는다면 다음 코드로 넘어가지 않는다
비동기함수 : 코드가 종료되지 않더라도 자동적으로 다음 코드로 넘어간다. 즉 특정 코드의 연산이 끝날때까지 코드의 실행을 멈추지 않고 다음코드를 먼저 실행한다. 비동기적 js를 동작하는 기술을 통틀어 Ajax라고 부르는데, Ajax를 이용해서 데이터를 불러오는 동안 다음 코드의 진행이 가능하다.
fetch는 대표적인 비동기 함수인데, API로부터 받아온 정보를 사용할 필요가 있는 경우에 .then함수를 써서 작동이 끝날 때까지 멈춰놓을 수 있다. --> JS는 싱글 스레드로 동작하기에 멀티스레드와 같은 동작을 시키기 위해 비동기 호출을 사용한다. But 자바스크립트 런타임은 싱글 스레드가 아니다

endpoint

fetch에 넣는 url 중 중복되는 부분을 변수에다 할당해서 중복을 줄이는 방법.
endpoint를 위한 변수를 만들어서 주소를 할당하는 방식으로 쓰인다.

• then, catch보다 async, await / try, catch를 사용하는 것이 최신문법이다.