Ajax
자바스크립트를 이용한 비동기 HTTP 통신을 가능하게 해준다.
클라이언트와 서버 간에 데이터를 주고받는 기술로 XMLHttpRequest(XHR)객체를 이용하여 전체 페이지가 아닌 필요한 데이터만 불러올 수 있다.
장점
· jquery를 통해 쉽게 구현 가능
· error, success, complete의 상태를 통해 실행 흐름 조절 가능
단점
· jquery를 사용해야 간편하고 호환성이 보장된다.
· promise 기반이 아니다.
사용 예시
// use Ajax with Jquery
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);
}
});
axios
Node.js와 브라우저를 위한 Promise APU를 활용하는 HTTP 통신 라이브러리이다.
axios 또한 비동기로 HTTP 통신을 할 수 있으며 return을 promise 객체로 해주기 때문에 response 데이터를 다루기 쉽다.
장점
· response timeout (Fetch에는 없는 기능) 처리 방법이 존재
· promise 기반으로 만들어졌기 때문에 데이터 다루기가 편리하다.
· 브라우저 호환성이 뛰어나다.
단점
· 사용을 위해 모듈 설치가 필요(npm install axios)
사용 예시
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'suhanmu',
lastName: 'Kim'
}
});
fetch
ES6부터 들어온 자바스크립트 내장 라이브러리이다.
Promise 기반으로 만들어졌기 때문에 axios와 마찬가지로 데이터 다루기가 쉽고, 내장 라이브러리라는 장점으로 상당히 편하다.
장점
· 자바스크립트의 내장 라이브러리로서 별도로 import 할 필요가 없다.
· Promise 기반으로 만들어졌기 때문에 데이터 다루기 편리
· 내장 라이브러리이기 때문에 업데이트에 따른 에러 방지가 가능
단점
· 지원하지 않는 브라우저가 존재(IE11...)
· 네트워크 에러 발생 시 response timeout이 없어 기다려야 한다.
· JSON으로 변환해주는 과정이 필요
· 상대적으로 axios에 비해 기능이 부족
사용 예시
fetch("https://localhost:3000/user/post", { // 주소
method: "POST", // type
headers: {
"Content-Type": "application/json",
}, // contentType
body: JSON.stringify({
id: "asd123",
description: "hello world",
}), // data
})
.then((response) => console.log(response)); // 성공
.catch(function(error){
console.log(error)
}); // 에러
총평
libarary를 사용하지 않거나 framework를 써서 jquery를 import 하지 않아도 괜찮은 프로젝트일 경우 fetch를 애용,
하위 호환성을 위해 axios를 사용하는게 좋은 듯 하다.
