Axios vs Fetch API vs AJAX

1. 개요

API 호출을 수행하는 방법으로 Axios, Fetch API, 그리고 AJAX를 많이 사용한다. 이 세 가지 방법은 각각의 장단점이 있으며, 실제 프로젝트에서 어떤 것을 선택해야 할지 고민하는 개발자들이 많다.

이 글에서는 Axios, Fetch API, 그리고 AJAX의 차이점을 비교하고, 어떤 경우에 적절한지를 분석해본다.

2. Axios vs Fetch API vs AJAX 비교

2.1 Axios

구성:

• 외부 라이브러리 (npm install axios 필요)
• Promise 기반의 API 호출을 단순화함
• JSON 데이터를 자동 변환
• 요청과 응답을 인터셉터로 관리 가능

장점:

• Promise 기반으로 코드가 간결함
• 자동 JSON 변환 처리 (response.data 바로 사용 가능)
• 에러 핸들링이 직관적 (catch에서 HTTP 오류 감지 가능)
• 요청 취소 (cancel token) 지원

단점:

• 별도의 라이브러리 설치 필요 (axios 패키지 필요)
• 브라우저와 Node.js 간 설정 차이가 존재할 수 있음

사용 예시:

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

2.2 Fetch API

구성:

• 브라우저에서 기본 제공하는 API (window.fetch)
• Promise 기반의 API 호출 지원
• JSON 데이터를 변환하려면 .json() 호출 필요

장점:

• 브라우저 내장 API이므로 별도 라이브러리 설치 불필요
• Promise 기반의 비동기 처리 지원
• 최신 브라우저에서 기본적으로 제공됨

단점:

• JSON 변환을 수동으로 해야 함 (response.json() 호출 필요)
• 에러 핸들링이 불편 (HTTP 오류도 .catch()에서 감지되지 않음)

사용 예시:

fetch("https://api.example.com/data")
    .then(response => {
        if (!response.ok) {
            throw new Error("HTTP 오류 발생: " + response.status);
        }
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error(error));

2.3 AJAX (XMLHttpRequest)

구성:

• 오래된 방식이지만 여전히 일부 프로젝트에서 사용
• XMLHttpRequest 객체를 사용하여 요청 수행
• 콜백 기반으로 동작

장점:

• 거의 모든 브라우저에서 지원
• JSON 뿐만 아니라 다양한 데이터 형식(XML, HTML 등) 지원

단점:

• Promise를 지원하지 않아 코드가 복잡해질 수 있음
• 콜백 지옥(Callback Hell) 발생 가능
• 최신 프로젝트에서는 거의 사용되지 않음

사용 예시:

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(JSON.parse(xhr.responseText));
    }
};
xhr.send();

3. 어떤 경우에 무엇을 써야 할까?

기준AxiosFetch APIAJAX

사용 용이성	JSON 자동 변환 지원, 코드가 간결함	JSON 변환을 수동으로 수행해야 함	콜백 방식으로 코드가 복잡할 수 있음
설치 여부	별도 라이브러리 필요	브라우저 기본 제공	브라우저 기본 제공
에러 핸들링	.catch()에서 HTTP 오류 감지 가능	.catch()에서 네트워크 오류만 감지 가능	상태 값으로 직접 확인 필요
요청 취소	CancelToken 기능 제공	기본적으로 지원하지 않음 (AbortController 필요)	기본적으로 지원하지 않음
브라우저 지원	모든 주요 브라우저 지원	최신 브라우저에서 기본 지원	모든 브라우저에서 지원

4. 결론

• 라이브러리를 추가 설치하고 코드 가독성을 높이고 싶다면 → Axios 사용 추천
• 브라우저 기본 API만 활용하여 가벼운 프로젝트를 만들고 싶다면 → Fetch API 사용 추천
• 옛날 코드 유지보수나 특정 브라우저 지원이 필수라면 → AJAX 사용 가능하지만 권장하지 않음

✅ 최종 정리

• Fetch API는 기본적으로 내장되어 있지만, 에러 핸들링 및 JSON 변환이 불편
• Axios는 자동 JSON 변환, 간편한 에러 처리, 요청 취소 기능 제공
• AJAX (XMLHttpRequest)는 구형 방식이지만 모든 브라우저에서 동작 가능
• 최신 프로젝트에서는 Axios 또는 Fetch API 사용을 권장(React 경우는 RTK도 좋다)

Axios