ES6 - Fetch문과 Ajax 정리

ES6 - Fetch문과 Ajax 정리

 

Fetch문에 대해서만 정리를 하려 했지만 Fetch문이 Ajax 방식 중 하나이므로 Ajax에 대한 개념도 같이 정리하고자 한다. 처음에 배울때는 제이쿼리에 ajax() 메소드가 ajax방식에 전부인줄 알았던 것이 생각이 난다.. 여튼 혹시 나와 같이 생각하는 사람이 있다면 이 글을 보고 생각 정리에 도움이 됐으면 한다. 

 

웹 프로젝트를 진행하다보면 클라이언트와 서버 간 데이터를 주고 받기 위해 http 통신을 한다. 이때 비동기 통신을 해야될때도 있는데 예를 들어서 상품 리스트가 있다고 할때 상품에 좋아요 기능이 있다고 하자. 좋아요를 누르게되면 좋아요 카운트가 증가하던지 아니면 하트 모양등의 색이 변해야 되는데 이때마다 페이지가 갱신이 된다면 많이 불편할 것이다. 이럴때 바로 비동기통신을 이용하여 이러한 문제점들을 해결 할 수 있다.

 

ajax

먼저 ajax란 Asynchronous JavaScript And Xml에 약자이고 이러한 비동기 통신을 위해 사용되는 것이 jQuery에 ajax()함수가 있는것이다. ajax != ajax() 는 아닌 것이다. 

 

순수 ajax 사용

function reqListener (e) {
    console.log(e.currentTarget.response);
}

var oReq = new XMLHttpRequest();
var serverAddress = "https://jsonplaceholder.typicode.com/posts";

oReq.addEventListener("load", reqListener);
oReq.open("GET", serverAddress);
oReq.send();

jQuery에 ajax()

var serverAddress = 'https://jsonplaceholder.typicode.com/posts';

// jQuery의 .get 메소드 사용
$.ajax({
    url: ,
    type: 'GET',
    success: function onData (data) {
        console.log(data);
    },
    error: function onError (error) {
        console.error(error);
    }
});

코드만 봐도 jQuery의 코드가 더 직관적이고 ajax방식을 편리하게 사용할 수 있도록 도와준다. 

 

fetch

fetch api는 자바스크립트 ES6에서 추가된 내장 라이브러리이다. 내장 라이브러리이기 때문에 따로 설치를 할 필요도 없이 사용가능하여 편리하고 코드도 정말 간단하다. fetch를 알기 전에는 jQuery에 ajax()를 많이 이용했었지만 이제는 fetch만 사용한다. fetch문의 장점은 다음과 같다.

 

1. 사용이 쉽고 간단하다.

2. 뎁스가 깊어지지 않는다.

3. Promise객체로 값을 반환 받음

 

fetch api는 대부분의 최신 브라우저에서 정상작동을 하지만 ES6를 완벽하게 지원하지 않는 IE 등에서는 제대로 동작하지 않을 수 있다. 

 

fetch 기본구조

기본구조는 다음과 같다. 나름 직관적인 ajax()보다도 더 직관적인 것을 확인 할 수 있다. 아래 예시는 ES6에서 제공하는 화살표 함수 (arrow function expression)로 예를 들었다. 처음에는 어색한데 사용하다보면 확실히 편리하다.

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