JS에서 비동기 http 통신을 위한 방법은 대표적으로 3개(Ajax, Axios, fetch)가 있다.
이 중 내가 실제로 사용해본건 Ajax와 fetch뿐인데, 문득 각 방법별로 장단점이 뭔지 궁금해서 이번 기회에 정리해두려 한다.
Ajax
Asysnchronous JavaScript And XML의 약자로, 자바스크립트에서 백그라운드 HTTP통신이 가능하게 만든다.
http통신의 response와 request를 자바스크립트에서 비동기적으로 다룰 수 있다.
사실 뜻 자체가 비동기 자바스크립트라서, 근래엔 비동기 통신을 하는 자바스크립트 자체를 Ajax로 통칭하기도 한다.
새로고침이 필요 없다는 점 때문에 Google Gmail, Map에서 사용되어 주목받기 시작했다.
Ajax라 함은 보통의 상황에서는 jQuery Ajax를 일컫는 것 같다.
장점 :
jQuery를 통해 쉽게 구현이 가능하다.
error, success, complete의 상태를 통해 실행흐름을 쉽게 조절할 수 있다.
단점 :
jQuery를 사용해야한다.
promise기반이 아니다.
(async, await 등과 함께 쓰일때의 promise의 위력을 생각해보자)
fetch
Ajax에 대표적으로 사용되는 API는 XMLHttpRequest, Fetch가 있으며, 이전에는 XMLHttpRequest가 사용되다가 불편함과 호환성을 이유로 jQuery 내에서 Ajax를 사용하는 것이 대세가 되었다고 한다.
특히 IE에서 XMLHttpRequest를 사용할때는 조건문을 더 달고 호환성 이슈를 해결해야 되는 부분이 많은데, 여간 불편해보이는게 아니다.
이후에 fetch API가 ES2015 표준이 되면서 별도의 import가 필요 없는 fetch API가 쓰이는 상황이다.
더욱이 XHR객체를 통한 콜백보다 promise를 반환하는 fetch가 직관적이고 가독성이 좋으니까.
그런데 놀랍게도 IE11에서는 fetch API를 지원하지 않는다. (이러니까 망하지...)
따라서 IE11에서는 fetch역시 라이브러리를 사용해서 사용해야 한다.
fetch라 함은 보통의 상황에서는 IE를 제외한 대부분의 브라우저에서 별도의 라이브러리 없이 사용할 수 있는 fetch api를 말한다.
장점 :
IE를 제외한 대부분의 브라우저에서 별도의 라이브러리 import없이 사용이 가능.
promise를 반환하기 때문에 promise의 강력한 기능 및 async, await사용으로 생산성 향상)
단점 :
지원하지 않는 브라우저가 있음.
네트워크 에러 발생시 response timeout이 없어 기다려야함.
기타 부족한 기능들이 좀 있다.
Axios
Promise based HTTP client for the browser and node.js
node.js와 브라우저를 위한 http통신 라이브러리이다.
fetch와 달리 크로스 브라우징에 최적화되어있어 IE11까지 모조리 지원한다.(호환성에 중점)
promise를 지원하며, 편리하고 기능이 많아 몇몇 프론트 프레임워크에서는 사용을 권장한다.
장점 :
호환성 중심
기본 인스턴스 사용 가능(Axios객체에 기본 url을 할당해서 재사용한다던지...등등)
response timeout 처리 방법이 있다.
XSRF에 더 안전하다.
node.js에서 사용 가능(프론트, 백 둘 다 js기반 개발환경이라면 일관성을 줄 수 있을듯?)
단점 :
라이브러리 설치가 필요하다.
총평
장점과 단점을 정리하고 보니, Axios를 써보고 싶은 생각이 생겼다.
호환성 측면에서 강점을 가진데다가, 기능상으로 더 디테일하고 promise기반이라는 점이 마음에 들었다.
P.S.
2020.12.30 기준으로 Axios 사용중.
Axios의 크로스 브라우징 최적화, interceptor를 통한 에러 핸들링, 기본 인스턴스 설정을 통한 전역적인 세팅 관리 등등...
다양한 장점으로 인해 Axios 추천.