AJAX, Fetch, Axios

 

목차

 

 

 

1. AJAX (Asynchronous JavaScript and XML)

 

2005년 탄생

 

기존: 웹 페이지에서 서버와 데이터를 주고받을 때 페이지 전체를 새로 고치는 방식 (비효율적)

현재: 페이지 일부만 동적으로 갱신 (비동기를 사용할 수 있게 됨)

*비동기: 작업을 요청하고 그 작업이 끝날 때까지 기다리지 않고 다른 일을 할 수 있게 해주는 방식

 

📌단점

• 복잡한 코드: AJAX를 사용할 때는 XMLHttpRequest 객체를 직접 다뤄야 해서 코드가 길어지고 복잡
• 브라우저 간 차이: 초기에는 브라우저 간 호환성 문제
• 지원 부족: 일부 기능은 구형 브라우저에서 제대로 지원되지 않음

 

2. Fetch API

2015년 W3C 웹 표준 채택됨 (2014년 쯤 등장)

 

기존: AJAX의 XMLHttpRequest 객체 사용 복잡, 직관적이지 않음

현재: 직관적이고 사용하기 쉬운 Promise 기반 설계

 

= 가벼운 느낌이 강하고 설치할 필요 없어서 편함

 

📌장점

• Promise 기반: 비동기 처리에서 then()과 catch()를 이용한 체이닝 방식으로 코드가 깔끔하고 읽기 쉬움
• 기본 내장 API: Fetch는 자바스크립트 내장 API라서 추가적인 라이브러리를 설치할 필요가 없음
• 응답 처리: 응답을 바로 JSON으로 처리할 수 있어 직관적이고 간단

 

📌단점

• 브라우저 호환성: 초기에는 구형 브라우저에서 지원되지 않아서 폴리필이 필요, 현재는 대부분의 브라우저에서 지원하지만, 여전히 구형 브라우저에서는 문제
• 에러 처리: Fetch는 HTTP 오류 상태를 자동으로 처리하지 않기 때문에, 상태 코드가 400 이상일 경우 직접 throw로 처리해야 함
• 상태 관리 필요: 응답이 성공적인지 아닌지를 개발자가 명시적으로 확인해야 하므로, 코드가 좀 더 번거로움

 

 

3. Axios

2014년에 만들어짐

자바스크립트에서 비동기 HTTP 요청을 쉽게 처리할 수 있도록 도와주는 라이브러리

현재: XMLHttpRequest와 Fetch의 장점을 결합, 사용하기 쉽고, 직관적 등등

 

=  무거운 느낌에 설치해야하지만 에러처리나 다양한 방면에서 편리

 

 

📌장점

• 자동 JSON 변환: 서버 응답을 자동으로 JSON 객체로 변환해줘서, 별도의 변환 작업이 필요 없음
• 응답 인터셉터: 응답을 받기 전에 특정 작업을 처리하거나, 응답을 받은 후에 조작할 수 있음
• 요청 취소 기능: 요청을 취소할 수 있는 기능을 제공함
• 브라우저 호환성: Axios는 구형 브라우저부터 최신 브라우저까지 폭넓게 호환됨
• 편리한 기능들: axios.all로 여러 요청을 병렬 처리할 수 있고, Promise 기반이라 오류 처리도 쉬움

 

📌단점

• 외부 라이브러리: Axios는 기본 내장 API가 아니라 외부 라이브러리를 설치해야 하기 때문에, 추가적인 설치와 설정이 필요함
• 상대적으로 큰 용량: Axios는 Fetch나 XMLHttpRequest에 비해 조금 더 큰 용량을 차지할 수 있음