[Library] Ajax vs fetch vs axios

요즘 회사에서 Vue.js 기반으로 한 웹 솔루션을 제작중인데 아무래도 Vue에서 권장하는 HTTP 통신 라이브러리가 axios여서 그런 지 솔루션에서도 axios를 이용해 api 통신을 하고 있다. 그러다 오늘 문득, Ajax와 Fetch, axios 이 세가지 통신 라이브러리에 대한 개념 정리가 필요하다는 생각이 들었다. 먼저 XMLHttpRequest(XHR)로 기반으로 제작된 Ajax에 대해 알아보자.

1. Ajax

ajax란? Asynchronous javascript and xml의 줄임말로 직역하자면 비동기식 자바스크립트와 xml을 말한다. 자바스크립트를 이용한 비동기 통신으로, 클라이언트와 서버 사이에서 xml형태의 데이터를 주고받는 통신방법을 의미한다.
jQuery에서 제공하는 $.ajax 메소드로 손쉽게 사용 가능하며 보통 우리가 알고 있는 ajax의 방식이다. 

$.ajax({
  url: '/test',
  type: 'get',
  dataType: 'json',
  data: { name, value },
  timeout: 1000
})

기본적으로 제공되는 ajax입력방식은 jQuery가 나온 뒤로 잘 사용하지 않는 방식이다. 

// use Ajax without Jquery

function reqListener (e) {
    console.log(e.currentTarget.response);
}

var oReq = new XMLHttpRequest();
var serverAddress = ".../test";

oReq.addEventListener("load", reqListener);
oReq.open("GET", serverAddress);
oReq.send();

1-1. Ajax의 장점 

- success, error, complete 등 각 상태를 반환할 때 적절한 실행 흐름 조절 가능
- dataType을 설정하여 자동 변환 가능
- jQuery를 이용해 쉽게 구현 가능

1-2. Ajax의 단점 

- Promise 기반이 아니기때문에 then과 catch 메소드를 사용할 수 없다.

 

2. Fetch API 

Fetch API란? fetch는 ES6부터 들어온 JavaScript의 내장 라이브러리이다. 내장 라이브러리이기때문에 상당히 편리하며, JS의 Promise기반으로 만들어져서 Axios처럼 데이터를 다룰 때 어렵지 않다.

// post
fetch(".../test", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    name: "test",
    value: "test",
  }),
}).then((response) => console.log(response));

// get(get은 default method 이므로 생략 가능)
  fetch('url', {
    method:'GET'
  }).then((res) => res.json()).then((res) => res.status)
    
  fetch('url',{}).then((res) => res.json()).then((res) => res.status)

2-1. Fetch API의 장점 

- 별도의 import를 해줄 필요가 없다. 
- promise 기반이기 때문에 사용이 쉽다.
- 내장 라이브러리이기때문에 사용하는 프레임워크가 안정적이지 않을 경우에 사용하기 좋다.
(업데이트에 따른 에러 방지 가능)

2-2. Fetch API의 단점 

- 지원하지 않는 브라우저가 존재한다 (IE11...) 
- 네트워크 에러가 발생할 경우 response timeout이 없기 때문에 무한대로 기다려야 한다.
- JSON으로 변환해주는 과정이 필요하다.
- 상대적으로 axios에 비해서 기능이 부족한 편이다.

 

3. Axios

Axios란? axios는 Node.js와 브라우저를 위해 Promise API를 활용하는 HTTP 통신 라이브러리이다. 비동기 HTTP 통신을 할 수 있으며, return을 promise 객체로 하기 때문에 response 데이터를 다루기 수월하다.

import axios from "axios" 

// post
axios({
  method: 'post',
  url: '.../test',
  data: {
    name: 'test',
    value: 'test'
  }
}).then((response) => console.log(response));

// get

axios.get('.../test') 
     .then((Response)=>{console.log(Response.data)}) 
     .catch((Error)=>{console.log(Error)})

3-1. Axios의 장점 

- fetch와 다르게 response timeout 처리 방법을 갖고 있다. 
- promise 기반으로 다루기가 쉽다.
- 크로스 브라우징이 우수하다.

3-2. Axios의 단점 

- 모듈 설치를 해야한다.

 

📚 정리 

간단한 통신을 할 경우에는 fetch를 사용하는 것이 개발하는데 편리하고, 좀 더 까다로운 기능이 필요하고 복잡한 통신을 할 경우에는 axios를 사용하는 것을 추천하는 편이다. 번외로 React-Native와 같이 업데이트가 잦을 경우에는 내장 라이브러리인 fetch를 사용하는 것이 좀 더 안정적일 수 있다.

추가로 아래의 Axios, Fetch API 비교 테이블을 참고해주세요!

	Axios	Fetch
브라우저 호환	O	X(일부만 호환 가능)
요청 취소	O	X
데이터 전송시 속성	data속성 사용 / 데이터 자동 변환 가능	body 속성 사용 / .json()을 이용해 변환
XSRF 보호	O	X
인터셉터 요청	O	X(not natively)
다운로드 progress	O	X
timeout(default)	O	O
Promise API based Request?	O	O