자바스크립트 - fetch란?

 

 

Fetch의 탄생 배경

fetch가 나오기 전까진 자바스크립트에서는 ajax를 쓰기란 매우 까다로웠다.

또, 익스플로러랑 기타 브라우저가 맞춰져 있지 않다 보니 커먼 라이브러리로 만들어 쓰거나 손쉽게 만들어져 있는 제이쿼리(jQuery)를 이용해왔다.

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

$.ajax({
    url: "",
    type: "",
    cache: ,
    dataType: "",
    data: "",
    success: function(data){
    },

    error: function (request, status, error){        
    }
  });

 

여기서 AJAX란?

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

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

XMLHttpRequest는 무엇?

대부분의 웹 브라우저에서는 서버로부터 데이터를 요청하는 XML 객체들을 내장하고 있다.

이름만 보면 XML 데이터만 다룰 수 있을 것 같지만 모든 데이터를 다룰 수 있으며, AJAX 프로그래밍에서 주로 사용한다.

XMLHttpRequest를 이용하면 웹 페이지를 전부 로딩하고도 서버로부터 데이터를 요청하거나 전송받을 수 있으며, 웹 페이지를 전부 로딩하지 않고도 일부만을 갱신하는 게 가능해진다.

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

 

fetch 란?

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

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

기본 구조

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

기본적인 구조와 동작은 Promise 객체와 동일하다.

파라미터로 요청을 보낼 url을 입력해 주고 응답을 받아서 추가적인 작업 또한 해줄 수 있다.

then에서 응답 객체 res를 받고, catch에서 에러 요청이 발생했을 때, 에러를 받는다.

요청 정보 파라미터

fetch의 두 번째 파라미터로 요청에 대한 추가적인 데이터를 입력할 수 있다.

fetch(url, {
   method: 'post',
   headers: {
     "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
   },
   body: 'foo=bar&lorem=ipsum'
})
.then(res => {
  console.log(res);
})
.catch(error => console.log(error));

method : HTTP method와 동일하며 요청 방식을 나타낸다. (GET, POST, PUT, DELETE 등)

headers : 요청 헤더에 대한 정보를 나타낸다.

body : 요청을 보내는 데이터를 나타낸다. 여러 가지 자료형을 대입할 수 있다.

 

fetch 파라미터로 직접 입력하기도 하지만 주로 객체 변수에 저장해서 대입하는 방식으로도 사용한다.

let obj = {
    method: 'post',
    headers: {
      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
    },
    body: 'foo=bar&lorem=ipsum'
}
fetch(url, obj)
.then(...)

 

POST 요청 보내고 응답받기

fetch(url, {
  method: 'POST',
  body: JSON.stringify({ name: "hello!" })
})
.then(res => {
  if (res.status === 200) {
    res.text().then(text => console.log(text)
  }
  else {
    console.log(res.statusText)
  }
})
.catch(err => console.log(err))

POST로 body안에 데이터를 넣고, 요청을 보내주면 응답 객체 res를 받게 되는데 res 안에는 응답에 관한 정보가 존재한다.

status는 요청이 성공인지 실패인지를 판별할 수 있게 해주는 요소이다.

또 응답에 대한 내용은 res.text()를 통해 확인할 수 있다.

text() 외에도 arrayBuffer, blob, json, formData 등의 메서드를 사용하여 값을 볼 수도 있다.

GET, PUT, DELETE 요청도 같은 방식으로 보낼 수 있다. 

단, GET, DELETE 요청은 url 파라미터 하나만 입력하여 사용한다.

 

🎈 결론!

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