더 공부하기
[번역] 입문자를 위한 Axios vs Fetch
Axios vs Fetch for beginners
ajax
AJAX : Asynchronous JavaScript And XML의 약자
간단히 말해서 서버와 통신하기 위해 XMLHttpRequest(XHR) 객체를 사용하는 것을 말한다. AJAX의 가장 매력적인 특징은 '비동기(asynchronous)' 특성이다. 페이지를 새로고침하지 않아도 서버와 통신하고 데이터를 교환해 페이지를 업데이트할 수 있다.
예를 들어 버튼을 클릭하 때마다 페이지가 갱신되면 불편하다. 이걸 비동기식으로 클라이언트와 서버가 데이터를 주고 받게 하면 새로고침하지 않아도 필요한 데이터를 불러올 수 있다. 새로고침은 나중으로 미뤄두기.
-->> XMLHttpRequst 객체를 만들고 URL을 open해서 요청을 send한다.
open(method, url, async, user, password) open 메서드 사용시 비동기/동기도 선택할 수 있다. method로는 4가지를 작성할 수 있다. (GET, POST, PUT, DELETE)
XMLHttpRequest.open()
function reqListener() {
console.log(this.responseText);
}
const req = new XMLHttpRequest();
req.addEventListener("load", reqListener);
req.open("GET", "http://www.example.org/example.txt");
req.send();// (XHR(XMLHttpRequest)을 사용한 코드)
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.log(xhr.responseText);
}
}
};
xhr.open('GET', 'https://localhost:3000'); // 메서드와 주소 설정
xhr.send(); // 요청 전송
xhr about(); // 전송된 요청 취소하지만 Jquery가 사용하기 편하다.
// (Jquery를 사용한 코드)
var serverAddress = 'https://localhost:3000');
$.ajax({
url : serverAddress,
type : 'GET',
success : function onData (data) {
console.log(data);
},
error : function onError (error) {
console.error(error);
}
});또는
$.get(주소) get 메서드를 사용하면 url에서 데이터를 가져올 수 있다. 그리고 가져온 데이터는 .done 아니면 .then 에 담겨서 온다.
$.get(주소).done(function (data) { console.log(data) })
ajax 요청 성공시 .done 안에 있는 코드가 실행되고(파라미터 data에 데이터가 담긴다),
ajax 요청 실패시 .fail 안에 있는 코드가 실행된다.
$.get(주소)
.done(function (data) { console.log(data) })
.fail(function (error) { console.log(error) })서버와 데이터를 주고 받을 때는 문자로 변환해야 하는데(예를 들어 parse/stringify() 사용해야 함),
jquery의 경우 $.get()이 JSON으로 자료가 도착하면 알아서 array/object로 변환해주므로 편리하다.
axios
Node.js와 브라우저를 위한 promise 기반의 HTTP client이다. 비동기로 HTTP 통신을 할 수 있으며 promise 객체로 반환받으므로 response 데이터를 다루기가 쉽다.
HTTP 요청에 최적화되어 있고, 상태도 잘 추상화되어 있는 API들이 axios와 fetch 등
axios({
method : 'post',
url : 'https://localhost:3000/user',
data : {
userName : 'Cocoom',
userId : 'co1234',
}
}).then(response) => console.log(response);사용하기 위해 모듈을 설치해야 한다.
$ npm install axios
fetch
fetch(url, options)
.then((response) => console.log("response:", response))
.catch((error) => console.log("error:", error));
ES6부터 생겨난 자바스크립트 내장 라이브러리
Promise 기반으로 만들어졌으므로 axios와 마찬가지로 데이터를 다루기가 쉽고, 내장 라이브러리라는 장점이 편리하다.
fetch("https://localhost:3000/user/post", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
id: "asd123",
description: "hello world",
}),
}).then((response) => console.log(response));장점
- 자바스크립트의 내장 라이브러리이므로 별도의 import가 필요 없고, 비교적 업데이트에 따른 에러를 방지할 수 있다.
- promise 기반이므로 데이터를 다루기가 쉽다.
- 내장 라이브러리이므로 사용하는 프레임워크가 안정적이지 않을 때/혹은 간단한 통신에서 사용하기 좋다.
fetch('http://example.com/movies.json')
.then((response) => response.json())
.then((data) => console.log(data));단점?
JSON으로 변환해주는 과정이 필요하다.
fetch()가 반환하는 promise 객체는 404,500과 같은 HTTP 오류 상태를 수신해도 거부되지 않는다. 아예 요청을 완료받지 않는 한 오류 상태도 수신된다.
참고
