프로젝트를 하다보면 클라이언트와 서버간의 비동기 HTTP 통신을 할 일이 생긴다. 나는 이번 프로젝트에서 내내 axios만 사용했는데 fetch API를 사용하는 방법도 있어서 차이도 공부할 겸 포스팅해본다.

axios란?

axios는 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이며, Spring Boot API와 쉽게 통신 할 수 있다.

사용법 :

axios.get("https://api.example.com/data")
  .then(response => console.log(response.data))  // 자동 JSON 변환
  .catch(error => console.error(error));

Fetch API란?

자바스크립트의 bulit-in 라이브러리이며 일반적으로 API를 연동하기위해 사용하던 방식이다.

사용법 :

fetch("https://api.example.com/data")
  .then(response => response.json())  // JSON 변환 필요
  .then(data => console.log(data))
  .catch(error => console.error(error));

찾아보면 두개 다 좋은 방식이지만 Axios가 조금 더 선호도가 높은것을 알 수 있다.

Fetch보다 Axios를 더 많이 사용하는 이유

• 자동으로 json 데이터 변환 (fetch는 .json()호출 필요)
• 요청 및 응답 인터셉터 지원 (fetch는 직접 then처리 필요)
• cancelToken으로 간단하게 요청 취소 가능 (fetch는 AbortController 필요)

등등.. fetch API보다 axois가 기능이 더 풍부하고 사용하기 편리한듯 하다.

참고) AJAX와 Axios의 관계

AJAX란?

Asynchronous Javascript And XML의 약자이며 비동기적으로 서버와 데이터를 교환할 수 있다.
XMLHttpRequest객체를 통해서 서버에 request, response 처리를 한다.
+)jQuery라이브러리의 ajax함수를 사용하면 복잡한 Ajax기법을 더 쉽게 사용할 수 있다.

AJAX와 Axios의 관계

Axios는 내부적으로 AJAX를 기반으로 동작하지만, 더 편리한 기능을 제공하는 라이브러리이다.
즉 AJAX를 더 쉽게 쓰기위해 Axios를 쓰는 것