서버 간 데이터를 주고받기 위해 HTTP 통신을 사용한다. 이 때 js에서 비동기 HTTP 통신을 위해 Ajax, Axios, fetch가 사용된다.
Ajax(Asynchronous JavaScript And XML)
자바스크립트를 이용해 클라이언트와 서버 간에 데이터를 주고받는 비동기 HTTP 통신이다. XMLHttpRequest(XHR) 객체를 이용해서 전체 페이지가 아닌 필요한 데이터만 불러올 수 있다.
장점
- Jquery를 통해 쉽게 구현 가능
- Error, Success, Complete의 상태를 통해 실행 흐름 조절 가능
단점
- Jquery를 사용해야 간편하고 호환성이 보장됨
- Promise 기반이 아님
Axios
기존 웹에서 리소스를 비동기로 요청하기 위해서는 XHR(XML HTTP Requset)객체를 사용했어야 하는데 XHR은 잘 디자인 되어있는 API가 아니다. Axios는 Node.js와 브라우저를 위한 Promise API를 활용하는 HTTP 통신 라이브러리고 비동기로 HTTP 통신을 할 수 있으며 return을 promise 객체로 해주기 때문에 reponse 데이터를 다루기 쉽다.
장점
- Promise 기반으로 만들어졌기 때문에 데이터 다루기 편리
- 브라우저 호환성이 뛰어남
단점
- 사용하기 위해 모듈 설치 필요(npm i ~)
fetch
ES6부터 자바스크립트의 내장 라이브러리로 들어옴.
promise 기반으로 만들어졌기에 Axios와 마찬가지로 데이터를 다루는데 어렵지 않으며 내장 라이브러리라는 장점이 존재.
장점
- 자바스크립트의 내장 라이브러리 이므로 별도로 import 할 필요가 없음
- Promise 기반으로 만들어졌기 때문에 데이터 다루기 편리
단점
- 지원하지 않는 브라우저 존재
- JSON으로 변환해주는 과정 필요
- Axios보다 기능이 부족
Axios vs fetch
| Axios | fetch |
|---|---|
| 별도 라이브러리 설치가 필요(npm, yarn) | 자바스크립트 내장 라이브러리라 설치가 필요 없음 |
| CSRF 보호 가능 | 별도 보호 없음 |
| 자동으로 JSON 데이터 형식으로 변환 | .json()메서드를 사용해야 함 |
| 요청을 취소하거나 요청이 중단되기까지의 시간 타임아웃을 걸 수 있음 | 지원하지 않음 |
| HTTP 요청을 가로챌 수(interceptor) 있음 | 지원하지 않음 |
| 크로스 브라우징 지원 | 일부 브라우저에 제한적 |
[참고자료]
https://medium.com/@thejasonfile/fetch-vs-axios-js-for-making-http-requests-2b261cdd3af5
생각을 기록하자