jQuery(제이쿼리) ajax와 fetch와 Axios 차이점 비교, jquery ajax vs fetch vs axios

Ajax란?

전통저인 Ajax는 Asyncronous Javascript and XHTTPREQUEST(XHR)를 가리키며,
http 통신에서의 비동기적으로 데이터를 주고받는 방식의 하나입니다.
데이터가 업데이트 될 때마다 페이지 전체를 받아오는 대신,
화면에서 표시되는 일부 필요한 부분의 데이터에 대해서만 받아와서 업데이트하기 위해 도입되었습니다.
오래전에는 서버에서 데이터를 받아오는데 XML이 사용되었으나, 현재는 기본적으로 json 형식으로 받습니다.
전통적인 ajax의 사용코드는 아래와 같습니다.

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
 if (xhr.readyState === xhr.DONE) {
  if (xhr.status === 200 || xhr.status === 201) {
   console.log(xhr.responseText);
  } else {
   console.error(xhr.responseText);
  }
 }
};
xhr.open('GET', 'http://localhost');
xhr.send();

jQuery(제이쿼리) ajax

jQuery ajax는 ajax를 쉽게 사용하기 위해 도입된 메소드입니다.
jQuery는 javascript를 좀 더 편리하게 사용하기 위한 라이브러리인데,
그 중 ajax를 편하게 해주는 것이 바로 $.ajax (jquery ajax) 입니다.
전통적인 방식보다 훨씬 더 직관적으로 코드를 작성할 수 있다는 것을 바로 아래코드를 보고 확인할 수 있습니다.
 

$.ajax({
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType,
   success: function (res) { console.log(res); },
   error: function (res) {console.log(res); }
});

fetch

fetch API는 ES6에서 지원된 비동기 통신을 위한 javascript 내장 api이니다.
모든 모던 브라우저에서 사용이 가능합니다만 아직도 IE(인터넷 익스플로러)를 쓰는 환경이 있다면 사용불가합니다.

 

try {
  let response = await fetch(url);
  let data = response.json();
  console.log(data);
} catch(e) {
  console.log("Oops, error", e);
}

axios

Axios는 npm에 패키지로 설치하여 사용할 수 있으며, fetch와 동일한 작업을 수행합니다.
다만, fetch와 다르게 IE 11까지도 지원을 합니다.

axios({
    method: 'post',
    url: '/user/12345',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

jquery ajax vs axios vs fetch 비교 표

jquery ajax, axios, fetch 를 비교한 표를 작성해보았습니다.
위에서 소개한 내용 외에도, 아래와 같이 정리할 수 있습니다.