📌 1️⃣ Ajax (XMLHttpRequest 기반)
2. XMLHttpRequest(XHR)
XMLHttpRequest (XHR)
객체는 서버와 상호작용하기 위한 객체로 페이지의 새로고침 없이도 URL로부터 데이터를 받아올 수 있다.
즉, AJAX 프로그래밍에 주로 사용되는 객체이다.
HTTP 이외의 프로토콜을 지원한다(file 과 ftp )
readyState - XMLHttpRequest는 readyState 상태값을 가지고있다.
open() - open() 함수를 통해 XMLHttpRequest 객체를 초기화한다.
send() - send() 함수를 통해 요청을 서버에 전달한다.
특징
- 브라우저 내장 객체 (
new XMLHttpRequest()) - 오래된 브라우저까지 지원
- 콜백 기반(비동기 처리 복잡)
- 다양한 응답 포맷(XML, JSON, text 등)
- 헤더 설정, 진행률(Progress) 등 상세 컨트롤 가능
장점
- 레거시 브라우저 완벽 지원
- 파일 업로드/다운로드 등 세밀한 제어에 강함
- 네이티브라서 외부 의존성 없음
단점
- 콜백 지옥 (가독성, 유지보수 최악)
- Promise/async-await 지원 X
- 사용법이 다소 번거로움
- 코드가 장황해짐
📌 2️⃣ Fetch (window.fetch, ES6+)
특징
- ES6 표준 API (Promise 기반)
- 코드 간결, async/await 완벽 지원
- 응답 스트림 처리/클론 등 지원
- 기본 내장, 별도 설치 X
장점
- Promise/async-await로 직관적 코드 가능
- JSON 파싱 편리(
res.json()) - 네이티브라서 가볍고 빠름
단점
- IE 미지원
- *응답 에러(404/500)**도 catch가 아닌 then에서 분기 처리(직접 확인 필요)
- 기본적으로 요청 취소, 타임아웃 지원 X(AbortController 별도 필요)
- JSON 등 body 파싱 직접 처리 필요
📌 3️⃣ Axios
특징
- Promise 기반 외부 라이브러리(설치 필요)
- fetch + XHR 기능 결합
- 요청/응답 인터셉터, 자동 JSON 파싱, 요청 취소 등 다양한 부가 기능 내장
- 브라우저 & Node.js 모두 지원
장점
- 코드 한 줄로 모든 HTTP 메서드 지원 (
axios.get/post/put/...) - 요청/응답 인터셉터로 공통 에러 처리, 토큰 추가 등 쉽다
- 자동 JSON 파싱, 파라미터 직렬화, 폼/파일 업로드 등 편리
- 요청 취소/타임아웃/Progress 등 옵션 풍부
- 실무 대규모 프로젝트에서 검증된 안정성
단점
- 라이브러리 용량(조금 무거움)
- 외부 의존성, 버전 호환 관리 필요
- 최신 fetch 기능보다 일부 느릴 수 있음
📌 4️⃣ KY
특징
- Fetch 기반의 경량 Promise HTTP 클라이언트 (npm 설치 필요)
- 체이닝, request/response hook 등 modern API 지원
- Node.js/브라우저 모두 지원
장점
- API 단순 & 체이닝 문법 (
ky.get().json()) - 자동 JSON 파싱, timeout, retry 등 modern 기능 내장
- 사이즈 가벼움(axios보다 경량)
- fetch 기반이므로 async/await/AbortController 등과 잘 통합
단점
- 최신 fetch 기능이 모든 환경에 필요한 경우만 추천(생태계/커뮤니티는 axios보다 작음)
- 복잡한 폼 데이터, 커스텀 인코딩 등은 일부 직접 처리 필요
- 구형 브라우저는 fetch polyfill 필요
📌 5️⃣ 한눈에 보는 비교표
| Ajax(XHR) | Fetch | Axios | KY | |
|---|---|---|---|---|
| 표준/내장 | O | O | X (라이브러리) | X (라이브러리) |
| Promise | X | O | O | O |
| async/await | X | O | O | O |
| JSON 파싱 | 직접 | 직접 | 자동 | 자동 |
| 인터셉터 | X | X | O | O (hook) |
| 요청 취소 | X | AbortController | O | O |
| 파일 업/다운 | O | X | O | 일부 지원 |
| IE 지원 | O | X | O | X |
| 코드 간결함 | X | O | O | O |
| 크기/가벼움 | 가벼움 | 가벼움 | 무거움 | 가장 가벼움 |
| 커뮤니티 | 역사적 최강 | 넓음 | 대세 | 작음 |
인기 라이브러리인 Fetch와 Axios만 비교
window.fetch vs Axios 비교 핵심 테이블
| fetch | Axios | |
|---|---|---|
| ✅설치 | 내장(설치 불필요) | npm 설치 필요 |
| 지원 환경 | 최신 브라우저(IE 미지원) | 모든 브라우저(IE11↑) + Node.js |
| ✅기반 | Promise(ES6+) | Promise(ES6+) + XHR |
| ✅JSON 자동파싱 | 직접 .json() 호출 | 자동 변환(응답에 따라) |
| 요청/응답 인터셉터 | X | O (axios.interceptors) |
| 요청 취소 | AbortController 직접 사용 | axios.CancelToken(내장) |
| ✅타임아웃 | 미지원(직접 구현) | 내장 옵션 지원 |
| 폼/파일 업로드 | FormData 지원 | 더 직관적, progress/cancel 지원 |
| ✅에러 처리 | HTTP 에러(404/500)는 catch 불가, then 분기 필요 | HTTP 에러도 catch에서 바로 가능 |
| Progress 이벤트 | X | O (onUploadProgress 등) |
| API 구조 | 표준적(기초, 확장성) | 간결, 실무에 최적화된 옵션 |
| ✅용량 | 가벼움(네이티브) | 외부 의존, 더 무거움 |
| 커뮤니티 | 브라우저 표준 | 대규모 프로젝트 실무 경험 多 |
Let's do it developer