[JavaScript] HTTP 통신하기(fetch API) - 2

JavaScript HTTP 통신 방법을 정리해보는 두 번째 시간이다.
fetch API에 대해 탐구해보도록 하겠다.

필요한 배경지식

• Promise 객체
• HTTP 에 대한 개념

fetch 란?

• HTTP 요청 전송 기능을 제공하는 클라이언트 사이드 WEB API이다.
• Promise를 반환하기 때문에 가독성이 떨어지는 콜백 헬을 방지할 수 있다.

fetch() 함수

fetch(input, init)

1. 매개변수

• input : 요청 정보 혹은 url 경로를 전달한다.
• init : 옵션 객체로, 요청에 대한 다양한 설정을 지정할 수 있다.
  • method : HTTP 메서드를 지정할 수 있다.(기본값 : 'GET')
  • headers : 헤더를 나타내는 객체를 지정
  • body : 요청 바디에 포함될 데이터를 지정
  • mode: 크로스 오리진 요청 방식을 지정
  • credentials: 인증 정보를 어떻게 다룰 지 지정
  • cache: 캐시 사용 여부를 지정
  • redirect: 리다이렉트 처리 방법을 지정
  • referrer: Referer 헤더 처리를 지정

2. 메서드(Promise)

• then(res => {}) : HTTP 통신 성공 시 res 값을 받아 콜백함수를 실행한다.
• catch(rej => {}) : HTTP 통신 실패 시 rej 값을 받아 콜백함수를 실행한다.

fetch API를 이용한 HTTP 통신

	// url 경로 선언
  	let num = 1;
  	let url = `https://jsonplaceholder.typicode.com/todos/${num}`;
	let data = [];
  // fetch init 매개변수를 설정하지 않는 경우 기본값인 'GET' 메서드로 할당된다.
	fetch(url)
	.then((res) => {
    console.log(res);
    // HTTP 통신이 성공적인 경우 텍스트 형식의 데이터를 json() 메서드를 사용해 json 형식으로 변환해준다음 리턴한다.
    return res.json();
  })
	.then((res) => {
    // 리턴된 json 형식의 데이터를 활용해 요소를 조작한다.
    data = res;
    console.log(data);
    document.querySelector('h1').innerText = `${data.title}(${data.id})`;
  })
	.catch((rej) => console.log(rej));

  // btn01 클릭 시 url 매개변수를 조작하여 fetch 함수를 다시 실행한다.
  document.querySelector('.btn01').addEventListener('click',()=>{
    num = parseInt(prompt('몇 번 데이터에 접근할까요?'));
    while(isNaN(num)){
      num = parseInt(prompt('몇 번 데이터에 접근할까요?(숫자만 입력)'));
    }
    url = `https://jsonplaceholder.typicode.com/todos/${num}`;
    fetch(url)
    .then((res) => res.json())
    .then(res => {
      data = res;
      document.querySelector('h1').innerText=`${data.title}(${data.id})`;
    })
    .catch((rej) => console.log(rej));
  });

	// btn02 클릭 시 url 매개변수를 조작하고, 데이터를 입력받은 뒤 fetch 함수를 다시 실행해 데이터를 서버로 전송한다.
  // POST 방식으로 데이터 추가하기
  document.querySelector('.btn02').addEventListener('click',()=>{

    // prompt 창을 열어 데이터(title, useraId)를 입력받는다.
    const title = window.prompt('title을 입력해주세요');
    const userId = window.prompt('userId를 입력해주세요');

    // POST 전송할 url을 입력
    url = `https://jsonplaceholder.typicode.com/posts`;
    // init 객체에 POST 방식으로 전송할 데이터를 정의한다.
    fetch(url,{
      // method : HTTP 메서드 입력
      method: 'POST',
      // headers : HTTP 헤더 정의(통신할 데이터의 유형을 정의)
      headers: {
        'Content-Type': 'application/json'
      },
      // body : HTTP 통신으로 전송할 데이터를 JSON 문자열 형식으로 정의
      body: JSON.stringify({ title,
        body: 'bar',
        userId})
    })
    .then((res) => res.json())
    .then(res => {
      data = res;
      document.querySelector('h1').innerText=`${data.title}(${data.id})`;
    })
    .catch((rej) => console.log(rej));
  });

결과

마치며

fetch API를 활용한 HTTP 통신 방법에 대해 정리해보았다.
fetch API는 XMLHttpRequest 객체에 비해 사용 방법이 간단하고 코드 가독성이 좋지만, 브라우저에서 제공하는 API이기 때문에 node 환경에서는 동작하지 않는다는 점, 데이터가 응답되기만 하면 HTTP 통신 성공(200)으로 간주한다는 단점이 있다.
다음 포스팅은 fetch API의 단점을 보완할 수 있는 axios 라이브러리를 활용한 javascript HTTP 통신 방법에 대해 정리해 보도록 하겠다.