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 를 비교한 표를 작성해보았습니다.
위에서 소개한 내용 외에도, 아래와 같이 정리할 수 있습니다.

 

 

 

jquery Ajax	Axios	Fetch
요청객체에 url 존재	요청객체에 url 존재	요청객체에 url 미존재
써드파티 라이브러리	써드파티 라이브러리	모던 웹브라우저에 빌트인된 api, 인스톨 필요하지 않음.
XSRF 보호 지원없음	XSRF 보호 해줌	XSRF 보호 지원없음
parameter로 data property사용	parameter로 data property사용	parameter로 body property사용
Fetch는 string화 되어있음.	data는 object를 포함함.	Fetch는 string화 되어있음.
반환값에 대해 객체로 사용하기 위해서는 json() 메소드를 사용해야함.	반환값에 대해 자동으로 JSON data로 반환됨.	반환값에 대해 객체로 사용하기 위해서는 json() 메소드를 사용해야함.
timeout 설정방법 존재.	timeout 설정방법 존재.	timeout 지정방법 존재하지 않음
Axios has built-in support for download progress.	Fetch does not support upload progress.
지원브라우저 Chrome: (Current - 1) and Current Edge: (Current - 1) and Current Firefox: (Current - 1) and Current, ESR Internet Explorer: 9+ Safari: (Current - 1) and Current Opera: Current	지원브라우저 Chrome: Current Edge: Current Firefox: Current Internet Explorer: 11+ Safari: Current Opera: Current	지원브라우저 Chrome: Current Edge: Current Firefox: Current Internet Explorer: 지원않음 Safari: Current Opera: Current

 

 

총평

저는 jquery가 한창일때부터 개발을 해서 그런지 아직도 jquery ajax가 편한거 같습니다.
따로 libarary 를 사용하기 귀찮을 때라던지,
다른 frontend framework(vue, react 등) 를 써서 jquery를 import 하지 않아도 괜찮은 프로젝트를
하게 될 경우에는 fetch를 애용하였습니다.
다음 프로젝트 진행시에는 하위호환성을 위해 axios를 사용하는 쪽으로 한번 시도해봐야겠습니다.


jQuery(제이쿼리) ajax와 fetch와 Axios 차이점 비교, jquery ajax vs fetch vs axios
#jquery,#ajax,#fetch,#axios, #javascript,#제이쿼리,#에이잭스,#야약스,#페치,#자바스크립트

https://devscb.com/post/66

Comparison of differences between jQuery ajax and fetch and Axios, jquery ajax vs fetch vs axios