[Javascript] Fetch API

Ajax 통신을 이용할 때 지난 포스트에서 다룬 XMLHttpRequest, jQuery, Fetch 등을 사용합니다. 이 중 XHR 방식은 사용법이나 가독성면을 위협하고, 제이쿼리는 사용하지 않는 경향이 있기 때문에 Fetch를 사실상의 표준으로 채택하고 있습니다.

---

1. Fetch API

지난번에 비동기 통신을 다루는 객체인 XMLHttpRequest 객체를 알아보았습니다. 하지만 사용법이 조금 복잡하고 가독성도 썩 좋다고는 하지는 못한다고 할 수 있습니다. 그래서 이런 문제점을 해결하기위해 ES6부터 통신을 위한 Fetch API를 채택했습니다. Fetch는 브라우저에 내장되어있기 때문에 따로 라이브러리의 설치같은 과정 없이도 이용할 수 있다는 장점이 있습니다.

Fetch는 네트워크의 Request와 Response에 대한 객체를 제공합니다. Fetch는 관련된 함수가 fetch() 하나 뿐 입니다. 이 함수는 프로미스 객체를 반환합니다. 이때 요청의 성공이나 실패같은 결과에 상관없이 반환된 프로미스 객체로부터 Response 객체를 취득할 수 있습니다.

프로미스에 대한 설명은 아래 링크를 참조해주세요.

2021.05.24 - [Programming/Javascript] - [Javascript] 프로미스(promise) 객체

[Javascript] 프로미스(promise) 객체

 

 

2. fetch() 사용해보기

fetch(url, options)
url: 취득할 요소의 리소스(url, 경로 등) <- 필수 인수!!

fetch 함수의 기본 형태 입니다. URL은 필수로 주어야하는 인수입니다. options는 선택인데, HTTP 방식, 요청 헤더, 요청 본체(body) 등을 설정할 수 있습니다.

 실제 사용 구조는 아래와 같이 사용합니다.

fetch(url, (options))
  .then((res)=> {
    //url로부터 fetch의 호출이 성공했을 때의 동작
  })
  .catch((error)=>{
    //url로부터 fetch의 호출이 실패했을 때의 동작
  });

호출 성공시의 응답 객체 res는 HTTP의 status, 응답 헤더, 응답 본체(body) 등을 취득할 수 있습니다.

 

2-1. GET과 POST HTTP 방식에 대한 fetch

HTTP 통신 방식에는 GET방식과 POST방식이 있습니다. 지금은 fetch api에 대해 설명하고 있으니 간단하게만 짚고 넘어가자면, GET 방식은 클라이언트가 서버로부터 데이터 등을 조회하기 위한 방식이고, POST 방식은 클라이언트가 서버의 데이터 등을 추가하거나 수정하기 위한 통신 방식입니다.

아무튼 이렇게 두 방법이 차이가 있다보니 fetch 함수도 HTTP 방식에 따라 조금 다른 사용법을 보여줍니다.

 

GET 방식

GET 방식은 처음에 소개했던 방식 그대로 이용해주어도 됩니다.

fetch(url, (options))
  .then((res)=> {
    //url로부터 fetch의 호출이 성공했을 때의 동작
  })
  .catch((error)=>{
    //url로부터 fetch의 호출이 실패했을 때의 동작
  });

 

POST 방식

POST 방식은 최근 가장 많이 쓰는 JSON을 이용한다고 하면, 옵션에 POST 방식임을 알리고 그에 따른 포맷을 지정해주어야합니다.

fetch(url, {
  method: "POST",
  headers: {
    //JSON 이용시, 헤더에 JSON을 이용한다고 알려야함!
    //+헤더에 넣고싶은 내용
  },
  body: {
    //JSON 이용시 body를 반드시 직렬화 해주어야 합니다.(JSON.stringfy)
    //바디에 넣고싶은 내용들
  }
  })
  .then((res)=> {
    //url로부터 fetch의 호출이 성공했을 때의 동작
  })
  .catch((error)=>{
    //url로부터 fetch의 호출이 실패했을 때의 동작
  });

---

참조

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API

Fetch API - Web API | MDN

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Using Fetch - Web APIs | MDN