[새로운 기능] fetch API

이번 포스트에서는 fetch api에 대해서 살펴보자.

fetch는 '가져오다'라는 뜻으로 Request나 Response와 같은 객체를 이용해서 HTTP 파이프라인을 구성하는 요소를 조작하고 원격지에서 정보를 가져오기 위해 사용한다. 

원문에 설명된 내용을 쓰다보니 말이 어려워졌는데 가장 쉽게 이해할 수 있는 예로 AJAX를 들 수 있다. 기존에는 AJAX를 Vanilla script에서 사용하기 위해서는 XMLHttpRequest 객체를 이용했는데 너무 번거롭기 때문에 jQuery나 Axios 같은 추가 라이브러리를 활용 했었다.

하지만  fetch API를 사용하면 간단하게 ajax 작업의 처리가 가능하다.

 

fetch api

 

fetch API?

fetch API는 Promise 를 기반으로 동작한다.

[es2015]-[Promise]01. Callback hell과 Promise

따라서 기존에 Promise 기반의 axios를 사용해본 경험이 있다면 아주 이해하기 쉽다.

fetch 함수는 필수 항목인 input과 옵션인 init을 파라미터로 가지며 Response 타입을 갖는 Promise를 반환한다.

function fetch(input: RequestInfo | URL, init?: RequestInit): Promise<Response>

 

요청

input은 필수 속성으로 정보를 가져올 대상의 URL이다. 이 값은 string 형태가 가장 일반적이며 Request 객체를 구성해서 전달할 수도 있다.

init은 옵션 객체로 요청 시 전달할  속성을 설정할 수 있다. 대표적으로 설정하는 init 객체의 속성은 아래와 같다.

• method: GET, POST 등 요청 방식으로 문자열. 기본은 GET
• headers: 요청 header에 대한 설정으로 object
• body: request body를 통해서 전달할 내용으로 string, literal, FormData, ...

 

응답

fetch api의 promise는 네트워크 장애 및 요청 실패 시(서버가 개입되지 못한 경우) 만 rejected 상태이고 나머지는 fulfilled 상태이다. 만약 404, 500 등 오류를 수신하게 된다면 Response 객체의 ok 속성이 false가 되고 나머지 상황은 true이다.

fetch의 상태

응답은 통상 2단계를 거쳐 진행된다.

먼저 서버에서 응답 헤더를 받으면 fetch 호출 시 반환받은 Promise 객체가 fulfilled 상태가 되고 이때 Response 객체가 전달된다. Response의 ok 속성으로 작업의 성공 여부를 알게 되는데 만약 상태코드가 2XX 인 경우는 true이고 나머지는 false이다. 하지만 이 상태는 아직 본문(body)을 받지 않은 상태이다. 

두 번째 단계는 본문의 내용을 받아오는 단계이다. 전달받은 Response 역시 Promise 인데 이 객체를 통해서 body 즉 실제 데이터를 받을 수 있다. 이때 사용되는 함수로는 body의 타입에 따라서 response.json(), response.text(), response.blob() 등이 있다.

 

fetch api 활용

다양한 형태로 fetch api를 사용해보자.

get

get 방식은 특별히 신경쓸 내용은 없어보이고 위에서 설명한 api의 기본 동작에 주목하자.

const url = "https://jsonplaceholder.typicode.com/posts/1";

const byFetch = () => {
  fetch(url)
    // 응답 처리 1단계: 상태만 파악 가능
    .then((response) => {
      if (!response.ok) {
        throw new Error(`오류 발생: ${response.status}`);
      }
      return response.json(); // 응답을 native js 객체로 변환
    })
    // 응답 처리 2단계: 실제 body 데이터 활용
    .then((json) => console.log(json))
    .catch((error) => console.error("fetch fail", error));
};

 

현재 이 상태들은 모두 성공적으로 동작하므로 콘솔에서 아래와 같은 정보 확인이 가능하다.

{
  body: "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  id: 1
  title: "sunt aut facere repellat provident occaecati excepturi optio reprehenderit"
  userId: 1
}

 

만약 여기서 url을 https://jsonplaceholder.typicode.com/some/1 처럼 서버의 존재하지 않는 자원을 요청하면 즉 404인 상태를 만들면 콘솔 출력은 아래와 같다.

 

또는 url을 아예 https://jsonplaceholdersome.typicode.com/posts/1 처럼 존재하지 않는 서버로 요청해보면 오류는 아래와 같다.

 

post

get을 통해서 기본 사용법에 익숙해졌다면 post를 통해서 init 객체의 사용에 대한 예를 살펴보자. 일반적으로 init 객체는 method, headers, body 등에 대한 설정이 이뤄진다. 간단히 아래의 예를 살펴보자.

const create = () => {
  fetch("https://jsonplaceholder.typicode.com/posts", {
    // 전송 방식: default - get
    method: "POST",
    // 전송 헤더 설정
    headers: {
      "Content-type": "application/json;charset=utf-8",     // json으로 보낼 때
      // 'Content-Type': 'application/x-www-form-urlencoded' // parameter로 보낼 때
    },
    // 전송 객체: JSON을 문자열로 변환해서 전달
    body: JSON.stringify({ title: "제목", body: "내용", userId: 1 }), // json으로 보낼 때
    //body: "title=제목&body=내용&userId=1",                          // parameter로 보낼 때
 })
  .then((response) => response.json())
  .then((json) => console.log(json));
};

post는 데이터를 body를 통해서 전달하는데 json 형태나 parameter로 보낼 수 있다. 보내는 데이터의 형태에 따라 headers의 content-type 설정이 다르니 주의 하자.

참고로 Servlet에서는 위 요청을 처리할 때 parameter로 전달 받았을 때는 request.getParameter로 처리하고 json으로 받았을 때는 request.getInputStream()을 이용해서 stream을 생성 한 후 문자열을 파싱해서 처리해야 한다. 스프링에서는 각각 @RequestParam, @RequestBody로 처리한다.

 

이제까지 간단히 fetch api 사용법에 대해서 살펴보았다. 개인적인 생각으로는 전역의 오류 처리나 전역 객체를 통한 공통 특성 관리 등이 없어서 좀 불편했다. 당분간은 axios를 주로 사용할 것 같다.

[다음 관련 글]

[새로운 기능] async와 await