[Javascript] fetch() 함수로 원격 API 호출하기

fetch() 함수로 원격 API 호출하기

서버단에서 대신 API를 호출해주기 보다는 클라이언트 단에서 직접 API를 호출하는 경우가 많다. (소위 Ajax로 브라우저에서 직접 비동기로 HTTP 통신을 하기도 한다.)

 

원격 API를 간편하게 호출할 수 있도록 브라우저에서 제공하는 fetch() 함수에 대해 알아보자.

 

XML Http Request 방식

xmlhttprequest 객체를 이용한 정통적인 초창기 비동기 서버 요청방식이다. 코드가 복잡하고 가독성이 좋지 않다는 단점이 있다.

var httpRequest = new XMLHttpRequest();

httpRequest.onreadystatechange = function() {
  if (httpRequest.readyState == XMLHttpRequest.DONE && httpRequest.status == 200) {
    document.getElementById("text").innerHtml = httpRequest.responseText;
  }
}

httpRequest.open("GET", "ajac_intro_data.txt", true);
httpRequest.sent();

라이브러리

원격 API를 호출하면 request, axios, jQuery같은 라이브러리이다. 브라우저에서 fetch() 함수를 지원하기 전에 클라이언트 단에서 직접 HTTP 요청하고 응답받는게 복잡해서 라이브러리를 사용했다. 요즘은 라이브러리 없이도 브라우저에 내장된 fetch() 함수를 이용하여 원격 API를 호출할 수 있다. 라이브러리를 사용하면 자바스크립트 번들(bundle) 파일의 크기만 늘어난다.

 

fetch API 방식

이벤트 기반인 XMLHttpRequest와 달리 fetch API는 Promise 기반으로 구성되어 있어 비동기 처리 프로그래밍 방식에 잘 맞다. 그래서 then이나 catch와 같은 체이닝으로 작성할 수 있다는 장점이 있다.

 

fetch 사용법

// fetch('서버 주소') 는 웹 브라우저에 '이 서버 주소로 요청해줘' 라는 의미고,
// 뒤에 .then은 '요청이 끝나고나서 이 일을 진행해줘' 라는 의미다.
fetch('ajax_intro_data.txt')
  .then( response => response.text() )
  .tehn( text => { document.getElementById("#t").innerHtml = text; } );

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

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

1. 기본적으로 http 메서드 중 GET으로 동작한다.

2. 개발자 도구 > 네트워크 탭에 가면 fetch로 들어온 데이터를 볼 수 있다.

 

fetch의 response 속성

fetch를 통해 요청을 하고 서버로부터 값을 응답 받으면 .then을 통해 함수의 인자에 넘기게 되는데 이 값은 Response 객체이다.

- response.status : HTTP 상태 코드 

- response.ok : HTTP 상태코드가 200~299일 경우 true

- response.body : 내용

- response.text() : 응답을 읽고 텍스트를 반환한다.

- response.json() : 응답을 JSON 형태로 파싱한다.

- response.formData() : 응답을 FormData 객체 형태로 반환한다.

- response.blob() : 응답을 Blob(타입이 있는 바이너리 데이터) 형태로 반환한다.

- response.arrayBuffer() : 응답을 ArrayBuffer(바이너리 데이터를 로우 레벨 형식으로 표현한 것) 형태로 반환한다.

 

응답 자료 형태 반환 메서드는 한번만 사용 할 수 있다.
만일 response.text()를 사용해 응답을 얻었다면 본문의 콘텐츠는 모두 처리 된 상태이기 때문에 뒤에 또 response.json() 써줘도 동작하지 않게 된다.

 

Fetch - CRUD 요청하기

메서드	역할
GET	GET을 통해 해당 리소스를 조회
POST	POST를 통해 해당 URI를 요청하면 리소스를 생성
PUT	PUT를 통해 해당 리소스를 수정
DELETE	DELETE를 통해 리소스 삭제

GET 메서드

존재하는 자원을 요청

단순히 원격 API에 있는 데이터를 가지고 올 때 쓰임

fetch 함수는 디폴트로 GET방식으로 작동하고 옵션 인자가 필요가 없다.

응답(response) 객체는 json() 메서드를 제공하고, 이 메서드를 호출하면 응답객체로부터 JSON 형태의 데이터를 자바스크립트 객체로 변환하여 얻을 수 있다.

fetch("https://jsonplaceholder.typicode.com/posts/1") // posts의 id 1인 엘리먼트를 가져옴 
  .then((response) => response.json())
  .then((data) => console.log(data))

{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit↵suscipit recusandae consequuntur …strum rerum est autem sunt rem eveniet architecto"
}

GET 메서드

새로운 자원 생성 요청

폼 등을 통해서 데이터를 만들어보낼 때, 보내는 데이터의 양이 많거나, 비밀번호 등 개인정보를 보낼 때 사용

method를 POST로 지정해주고, headers 옵션으로 JSON 포맷으로 적용해야 함. body 옵션은 요청 데이터를 JSON 포맷으로 넣어줌.

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST", 
  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))

PUT 메서드 (전체 수정)

존재하는 자원 변경 요청

API에서 관리하는 데이터의 수정을 위해 PUT 메서드를 사용함

method 옵션만 PUT으로 설정하는 점이외에는 POST와비슷

아예 전체를 body의 데이터로 교체해버림

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "PUT",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "Test" // 아예 title 엘리먼트로 전체 데이터를 바꿈. 마치 innerHTML같이.
  }),
})
  .then((response) => response.json())
  .then((data) => console.log(data))

PATCH 메서드 (부분 수정)

존재하는 자원의 일부 변경 요청

fetch("https://jsonplaceholder.typicode.com/posts/1", { // posts의 id 1인 엘리먼트를 수정
  method: "PATCH",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "Test" // title만 바꿈. 나머지 요소는 건들지 않음.
  }),
})
  .then((response) => response.json())
  .then((data) => console.log(data))

DELETE 메서드

존재하는 자원 삭제 요청

보낼 데이터가 없기 때문에 headers, body 옵션이 필요가 없다.

fetch("https://jsonplaceholder.typicode.com/posts/1", {
  method: "DELETE",
})
  .then((response) => response.json())
  .then((data) => console.log(data))

Fetch - async / await 문법

fetch의 리턴값 response 는 Promise 객체이다. 따라서 await / async 문법으로 가독성높게 코딩할 수 있다.

fetch("https://jsonplaceholder.typicode.com/posts", option)
.then(res => res.text())
.then(text => console.log(text));

//await은 async함수내에서만 쓸수 있으니, 익명 async 바로 실행함수를 통해 활용합니다.
(async () => {
  let res = await fetch("https://jsonplaceholder.typicode.com/posts", option);
  let text = res.text();
  console.log(text);
})()

fetch 모듈화 - 사용성 개선하기

fetch() 함수는 사용법이 아주 간단하지만, 계속 사용하다보면 똑같은 코드가 반복된다는 것을 느낄 것이다.

예를 들어, 응답 데이터을 얻기 위해서 response.json()을 매번 호출하거나, 데이터를 보낼 때, HTTP 요청 헤더에 "Content-Type": "application/json"로 일일히 설정해줘야 되거나 써야 될게 많다.

한두번 fetch() 를 사용하는 정도는 문제가 안되지만, 여러번 사용할 일이 있으면 따로 헬퍼 함수를 만들어 모듈화를 해놓는게 나중에 정말 편하게 사용할수 있다.

 

아래 코드와 같이 POST 요청을 보낼 필요가 있다면 함수로 따로 미리 구성을 짜놓고, 인자로 값들을 전달해 바로 응답값을 받는 식으로 구성을 짜놓자.

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));

 

 

 

 

 출처 

https://www.daleseo.com/js-window-fetch

[자바스크립트] fetch() 함수로 원격 API 호출하기

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-AJAX-%EC%84%9C%EB%B2%84-%EC%9A%94%EC%B2%AD-%EB%B0%8F-%EC%9D%91%EB%8B%B5-fetch-api-%EB%B0%A9%EC%8B%9D

 

[JS] 📚 자바스크립트 Fetch API 으로 AJAX 요청하기