JavaScript에서는 클라이언트와 서버간 데이터를 주고받기위해 비동기 HTTP통신을 사용한다.
이 비동기 HTTP통신을 위한 방법으로는 대표적으로 Ajax, Axios, Fetch가 있다.
- 비동기 Http 통신이란 response와 request를 비동기 식으로 다룰 수 있다는 것을 말한다.
💡 Ajax란 무엇인가?
Asynchronous Javascript And XML의 약자로, 비동기적으로 JS를 사용해서 데이터를 받아와 동적으로 DOM을 갱신 및 조작하는 웹 개발 기법을 의미한다. 여기서 XML이 있는 이유는 예전엔 데이터 포맷으로 XML을 많이 사용했기 때문이다.
http통신의 response와 request를 자바스크립트에서 비동기적으로 다룰 수 있다.
만약, 좋아요 버튼을 누를때마다 새로 갱신된다면 이는 매우 비효율적이다.
Ajax는 jQuery에서 사용하면 보다 쉽게 이용할 수 있다.
Ajax 사용 방법
XMLHttpRequest
일반적으로 XMLHttpRequest 객체를 사용하여 인스턴스를 만들어 인스턴스의 open() , send() 등의 메소드를 이용한다.
- jQuery를 사용하지 않고 JS로 작성한 방법
// use Ajax without Jquery
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를 사용하여 작성한 방법 : 더 직관적이고 편리하다. 호환성 보장.
// 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);
}
});
- 장점
- jQuery를 통해 쉽게 구현이 가능하다.
- error, success, complete의 상태를 통해 실행흐름을 쉽게 조절할 수 있다.
- 단점
- jQuery를 사용해야 더 간편하고 호환성이 보장된다.
- promise기반이 아니다.
💡 Fetch란 무엇인가?
fetch는 ES6(ES2015)부터 JS의 내장 라이브러리로 들어와 표준이 되어 별도의 import(별도의 라이브러리)가 필요없이 사용할 수 있다.
XMLHttpReqeust 보다 훨씬 직관적이고 Promise를 반환해준다. 편리하고 간단하다.
하지만 IE에서는 fetch를 지원하지 않는 버전도 있다고 한다.
Fetch 사용방법
fetch("url입력")
.then(res => res.json())
.then(resJson => console.log(resJson));응답객체는 json() , blob() 과 같은 내장 메서드로 body를 추출해내고 이는 다시 Promise를 리턴한다.
//fetch
//fetch의 Post메소드 구현
const url ='http://localhost3000/test`
const option ={
method:'POST',
header:{
'Accept':'application/json',
'Content-Type':'application/json';charset=UTP-8'
},
body:JSON.stringify({
name:'Jane',
age:20
})
fetch(url,options)
.then(response => console.log(response))
- 장점
- 내장 라이브러리로 별도의 라이브러리 import없이 사용이 가능하다.
- promise를 반환함으로 생산성 향상된다.
- 내장 라이브러리라서 사용하는 프레임워크가 안정적이지 않을때 사용하기 좋다.
- 단점
- 지원하지 않는 IE 버전이 있다.
- 네트워크 에러 발생시 response timeout이 없어 기다려야한다.
- 기타 기능들이 부족하다.
💡 Axios란 무엇인가?
Axios는 Promise based HTTP client for the browser and node.js
즉, node.js와 브라우저를 위한 HTTP통신 라이브러리이다.
fetch와 달리 크로스 브라우징에 최적화되어있어 IE11까지 모두 지원한다. 호환성이 좋다.
Promise객체를 리턴해주어 데이터를 다루기 쉽다.
편리하고 기능이 많아 몇몇 프론트 프레임워크에서는 사용을 권장한다.
fetch와 axios는 HTTP 요청에 최적화 되어 있고 상태도 잘 추상화 되어 있는 api이다.
Axios 사용방법
//axios
//axios의 post메소드 구현
axios({
method: 'post',
url: '/user/1',
data: {
name: 'dbs',
id: '1234'
}
});
- 장점
- response timeout 처리 방법이 있다.
- 브라우저 호환성이 뛰어나다. (크로스 브라우징 최적화)
- promise를 반환함으로 다루기 쉽고 생산성 향상된다.
- Axios객체에 기본 url을 할당해서 재사용하는 등 기본 인스턴스 사용이 가능하다.
- 단점
- 라이브러리 모듈 설치가 필요하다.
