회사에서 진행하는 스터디에서 axios, fetch 관련 내용을 배우게 되었다!
그런데 해당 개념을 정확하게 이해하기 어려워서 다시 스스로 공부해보고 공부한 내용을 짧게나마 정리해보려 한다🙂
개발을 할 때 클라이언트와 서버 간 데이터를 주고받는 행위는 필수적이다. 그리고 이때 우리는 HTTP 통신을 사용하게 된다. 그렇다면, JavaScript에서 비동기 HTTP 통신을 위해 사용되는 Ajax, Axios, fetch가 무엇이고 그 차이점이 어떤 건지 알아보도록 하자.
Ajax
정의
- Asynchronous JavaScript And XML(비동기식 Javascript와 XML)
- 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능
- 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고침하지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법
Ajax를 사용하는 이유
기본적으로 HTTP 프로토콜은 클라이언트에서 request를 보내고 서버에서 response를 받으면 이어졌던 연결이 끊기게 되어있다. 그래서 화면의 내용을 갱신하기 위해서는 다시 request를 보내고 response를 받으며 페이지 전체를 갱신하게 된다. 하지만, 이러한 방식으로 HTTP 통신을 진행하게 될 경우 자원과 시간을 매우 크게 낭비하게 된다.
위와 같은 상황을 개선하기 위해, Ajax는 HTML 페이지 전체가 아닌 일부분만을 갱신할 수 있도록 XMLHttpRequest 객체를 통해 서버에 request한다. 이 경우, JSON이나 XML형태로 필요한 데이터만 받아서 갱신하기 때문에 자원과 시간을 아낄 수 있게 된다.
Ajax의 장단점
장점
- 웹페이지의 속도 향상
- 서버의 처리가 완료될 때까지 기다리지 않고 처리할 수 있다.
단점
- 연속으로 데이터를 요청할 시 부하가 증가할 수 있다.
- Ajax를 쓸 수 없는 브라우저에 대한 문제 이슈가 있다.(IE 6 이하)
- 지원하는 charset이 한정되어있다.
- script로 작성되므로 디버깅이 용이하지 않다.
Ajax는 어떻게 사용할까?
간단한 예제를 통해 함께 확인해보자.
"I'm a test." 라는 문장이 적힌 test.html HTML 문서를 서버에 요청하자.
그 후 해당 문서의 내용("I'm a test.")을 파라미터로 받아 alert() 함수를 호출해보자!
<button id="ajaxButton" type="button">Make a request</button>
<script>
(function() {
var httpRequest;
document.getElementById("ajaxButton").addEventListener('click', makeRequest);
function makeRequest() {
httpRequest = new XMLHttpRequest();
if(!httpRequest) {
alert('XMLHTTP 인스턴스를 만들 수가 없어요 ㅠㅠ');
return false;
}
httpRequest.onreadystatechange = alertContents;
httpRequest.open('GET', 'test.html');
httpRequest.send();
}
function alertContents() {
if (httpRequest.readyState === XMLHttpRequest.DONE) {
if (httpRequest.status === 200) {
alert(httpRequest.responseText);
} else {
alert('request에 뭔가 문제가 있어요.');
}
}
}
})();
</script>
이 예제에서
1. 사용자는 브라우저 상의 "Make a request"라는 버튼을 클릭한다.
2. 버튼의 클릭 이벤트 핸들러는 makeRequest() 함수를 호출한다.
3. 브라우저는 서버로 요구를 보내고 onreadystatechange에 설정된 alertContents() 함수가 수행된다.
4. alertContents() 함수는 서버로부터 응답을 받았는지와 해당 응답이 정상적으로 처리된 응답인지를 검사해 정상적인 경우 test.html 파일의 내용을 파라미터로 받아 alert() 함수를 호출한다.
위 예제에 대해 더 자세하게 알고 싶다면 아래 사이트에서 확인할 수 있다.
AJAX 시작하기
Axios
위에서 살펴본 바와 같이 WEB에서 이떤 리소스를 비동기로 요청하기 위해서는 XHR(XMLHttpRequest)를 객체를 사용할 수 있다.
하지만, XHR은 요청의 상태나 변경을 구독하기 위해서 Event를 등록해 변경사항을 받아야 하고, 요청의 성공, 실패 여부나 상태에 따라 처리하는 로직이 들어가 있기 때문에 잘 디자인되어 있는 API가 아니다. 이를 보완하기 위해 HTTP 요청에 최적화된 API들이 생겨나기 시작했다.
대표적으로 Axios와 fetch가 그 예인데, 먼저 Axios부터 살펴보도록 하자.
정의
- Promise based HTTP client for the browser and node.js
- 브라우저와 node.js를 위한 HTTP 통신 라이브러리
- Ajax와 동일하게 비동기로 HTTP 통신을 가능하게 해주며 return을 Promise 객체로 해주기 때문에 response 데이터를 다루기에 용이하다.
Axios의 장단점
장점
- response timeout(timeout) 처리 방법이 있다.(fetch는 해당 기능을 가지고 있지 않음)
- promise 기반으로 다루기가 쉽다.
- 크로스 브라우징 최적화로 브라우저 호환성이 뛰어나다.
- 구형 브라우저를 지원한다.
단점
- 사용을 위해 라이브러리 설치가 필요하다.
Axios는 어떻게 사용할까?
Axios 요청(request) 파라미터 옵션
axios({
url: 'https://test/api/cafe/list/today', // 통신할 웹문서
method: 'get', // 통신할 방식
data: { // 인자로 보낼 데이터
foo: 'diary'
}
});- url: 서버 주소
- method: 요청 방식(기본: get)
- headers: 요청 헤더에 대한 정보
- data: 요청 방식이
PUT,POST,PATCH에 해당하는 경우 body에 보내는 데이터 - params: URL 파라미터(
?key=value로 요청하는 url get 방식을 객체로 표현한 것)
Axios 응답(response) 데이터
Axios를 통해 서버에게 요청을 보내면, 서버에서 처리를 한 후 클라이언트에게 응답하게 된다.
.then을 통해 response 객체에 담긴 데이터가 바로 응답 데이터이다.
Axios를 통해 서버로부터 받는 응답의 정보는 다음과 같다.
axios({
method: "get", // 통신 방식
url: "www.naver.com", // 서버 주소
}).then(function(response) {
console.log(response.data)
console.log(response.status)
console.log(response.statusText)
console.log(response.headers)
console.log(response.config)
}){
data: {}, // 서버가 제공한 응답(데이터)
status: 200, // 서버 응답의 HTTP 상태 코드
statusText: 'OK', // 서버 응답으로 터의 HTTP 상태 메시지
headers: {}, // 서버가 응답한 헤더는 모든 헤더 이름이 소문자로 제공됨
config: {}, // 요청에 대해 `axios`에 설정된 구성(config)
request: {}
// `request`는 응답을 생성한 요청
// 브라우저: XMLHttpRequest 인스턴스
// Node.js: ClientRequest 인스턴스(리디렉션)
}fetch
정의
- ES6부터 들어온 JavaScrit 내장 라이브러리
- JavaScript에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 메서드
- XMLHttpRequest와 비슷하지만 fetch는 Promise 기반으로 구성되어있어서 Axios와 마찬가지로 데이터를 다루기 쉽다.
fetch의 장단점
장점
- JavaScirpt의 내장 라이브러리이므로 별도로 import하여 사용할 필요가 없다.
- Promise 기반으로 만들어졌기 때문에 데이터를 다루기가 편리하다.
- 내장 라이브러리이기 때문에 업데이트에 따른 에러 방지가 가능하다.
단점
- 지원하지 않는 브라우저(IE11)가 존재한다.
- 네트워크 에러 발생 시 response timeout이 없다.
- axios에 비해 상대적으로 기능이 부족하다.
fetch는 어떻게 사용할까?
기본 구조
fetch(url)
.then(res => {
console.log(res)
})
.catch(error => {
console.log(error)
})파라미터로 요청을 보낼 url을 입력해주고, 보낸 요청에 대한 응답을 받아서 추가적인 작업을 진행해줄 수 있다.
then에서 응답 객체 res를 받고, catch에서는 에러 요청이 발생했을 때 에러를 받는다.
fetch 요청(request) 파라미터 옵션
fetch의 두번째 파라미터로 요청에 대한 추가적인 데이터를 입력할 수 있다.
fetch(url, {
method: 'post',
headers: {
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
},
body: 'foo=bar&lorem=ipsum'
})
.then(res => {
console.log(res);
})
.catch(error => console.log(error));- method: 요청 방식
- headers: 요청 헤더에 대한 정보
- body: 요청을 보내는 데이터
fetch 사용 예시
fetch("https://localhost:8080/url", {
method: 'POST',
mode: 'cors',
cache: 'no-cache',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(obj),
}) // fetch 실행이 끝나면 then의 내용 실행
// 응답을 JSON 형태로 파싱한다
.then(response => response.json()) // 해당 메서드를 호출하면, 응답 객체(response)로부터 JSON 포멧의 응답 전문을 자바스크립트 객체로 변환해 얻을 수 있다.
.then((data) => console.log(data));{
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit↵suscipit recusandae consequuntur …strum rerum est autem sunt rem eveniet architecto"
}정리
WEB에서 이떤 리소스를 비동기로 요청하기 위해서는 XHR(XMLHttpRequest)를 객체를 사용할 수 있지만, 이는 요청의 상태나 변경을 구독하기 위한 로직 처리가 필요하기 때문에 잘 디자인되어 있는 API가 아니다. 이를 보완하기 위해 HTTP 요청에 최적화된 API들이 생겨나기 시작했고 그것이 바로 Axios와 fetch이다.
참고 사이트
AJAX란 무엇인가?
AJAX 시작하기
[개발상식] Ajax와 Axios 그리고 fetch
[AXIOS] 📚 axios 설치 & 특징 & 문법 💯 정리
[JavaScript] fetch 사용법, fetch 응답 사용
[자바스크립트] fetch() 함수로 원격 API 호출하기
.png)