fetch 탄생배경

fetch가 나오기 전까진 자바스크립트에서는 ajax를 쓰기란 매우 까다로웠다.
또, 익스플로러랑 기타 브라우저가 맞춰져 있지 않다 보니 커먼 라이브러리로 만들어 쓰거나 손쉽게 만들어져 있는 제이쿼리(jQuery)를 이용해왔다.

예를 들면, jQuery의 ajax() 메소드와 같은 것들을 사용해 단지 AJAX 구현만을 목적으로 사용해왔다.

ajax

JavaScript의 라이브러리 중 하나이며, Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml의 약자)이다.

AJAX를 쓰는 이유는 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드할 수 있기 때문에 사용한다.

XMLHttpRequest

대부분의 웹 브라우저에서는 서버로부터 데이터를 요청하는 XML 객체들을 내장하고 있다.
이름만 보면 XML 데이터만 다룰 수 있을 것 같지만 모든 데이터를 다룰 수 있으며, AJAX 프로그래밍에서 주로 사용한다.
XMLHttpRequest를 이용하면 웹 페이지를 전부 로딩하고도 서버로부터 데이터를 요청하거나 전송받을 수 있으며, 웹 페이지를 전부 로딩하지 않고도 일부만을 갱신하는 게 가능해진다.

따라서, AJAX는 JavaScript를 사용한 비동기 통신, 클라이언트와 서버 간에 XML 데이터를 주고받는 기술이라고 할 수 있다.

객체 생성

var xmlHttp = new XMLHttpRequest();

readyState 프로퍼티

readyState 프로퍼티는 XMLHttpRequest 객체의 현재 상태
1. UNSENT (숫자 0) : XMLHttpRequest 객체가 생성됨.
2. OPENED (숫자 1) : open() 메소드가 성공적으로 실행됨.
3. HEADERS_RECEIVED (숫자 2) : 모든 요청에 대한 응답이 도착함.
4. LOADING (숫자 3) : 요청한 데이터를 처리 중임.
5. DONE (숫자 4) : 요청한 데이터의 처리가 완료되어 응답할 준비가 완료됨.

status 프로퍼티

서버의 문서 상태
200 : 서버에 문서가 존재함.
404 : 서버에 문서가 존재하지 않음.

XMLHttpRequest 요청/응답

var xmlHttp = new XMLHttpRequest();       // XMLHttpRequest 객체를 생성함.

xmlHttp.onreadystatechange = function() { // onreadystatechange 이벤트 핸들러를 작성함.
   // 서버상에 문서가 존재하고 요청한 데이터의 처리가 완료되어 응답할 준비가 완료되었을 때
   if(this.status == 200 && this.readyState == this.DONE) {
       // 요청한 데이터를 문자열로 반환함.
       document.getElementById("text").innerHTML = xmlHttp.responseText;            
   }
};

xmlHttp.open("GET", "/examples/media/xml_httpxmlrequest_data.txt", true);
xmlHttp.send();

fetch

fetch 매서드는 JavaScript에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 매서드이다.

XMLHttpRequest와 비슷하지만 fetch는 Promise를 기반으로 구성되어 있어서 더 간편하게 사용할 수 있다는 차이점이 있다.

구조

fetch(url)
.then(res => {
  console.log(res)
})
.catch(error => {
  console.log(error)
})

기본적인 구조와 동작은 Promise 객체와 동일하다.
파라미터로 요청을 보낼 url을 입력해 주고 응답을 받아서 추가적인 작업 또한 해줄 수 있다.
then에서 응답 객체 res를 받고, catch에서 에러 요청이 발생했을 때, 에러를 받는다.

fetch 요청/응답

method : HTTP method와 동일하며 요청 방식을 나타낸다. (GET, POST, PUT, DELETE 등)
headers : 요청 헤더에 대한 정보를 나타낸다.
body : 요청을 보내는 데이터를 나타낸다. 여러 가지 자료형을 대입할 수 있다.

fetch(url, {
  method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, *cors, same-origin
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, *same-origin, omit
    headers: {
      'Content-Type': 'application/json'
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    redirect: 'follow', // manual, *follow, error
    referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
    body: JSON.stringify(data) // body data type must match "Content-Type" header
})
.then(res => {
  if (res.status === 200) {
    res.text().then(text => console.log(text)
  }
  else {
    console.log(res.statusText)
  }
})
.catch(err => console.log(err))

fetch를 이용하면 XML 보다 HTTP 요청을 더 간편하게 보낼 수 있다!

Reference

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