[JavaScript] Ajax, Axios, fetch 용어 정리 및 장/단점 비교

서론

JavaScript에서 클라이언트와 서버 간 데이터를 주고받기 위해 비동기 HTTP 통신을 사용한다.

그 예로 Ajax, Axios, fetch 가 있다.

 

비동기에 관하여 참고하면 좋은 자료

• [JavaScript] Promise(프로미스) 란 무엇인가?
• [JavaScript] 비동기 처리 - Async / Await이란 무엇인가?

[JavaScript] Promise(프로미스) 란 무엇인가?

[JavaScript] 비동기 처리 - Async / Await이란 무엇인가?

 

---

Ajax (Asynchronous JavaScript And XML)

JavaScript를 사용한 비동기 HTTP 통신을 가능하게 해 줌.

클라이언트와 서버 간에 데이터를 주고받는 기술.

비동기 HTTP 통신이란 response와 request를 비동기적으로 다룰 수 있다는 의미.

XMLHttpRequest(XHR) 객체를 이용해서 전체 페이지가 아닌 필요한 데이터만 불러올 수 있음.

 

장점

 - jQuery를 통해 쉽게 구현 가능.

 - error, success, complete의 상태를 통해 실행 흐름 조절 가능.

 

단점

 - JQuery를 사용해야 간편하고 호환성이 보장됨.

 - promise 기반이 아님.

 

---

Axios

Promise based HTTP client for the browser and node.js - [npm]

브라우저(browser)와 Node.js를 위한 HTTP 비동기 통신 라이브러리.

Promise기반으로 만들어졌기에 데이터를 다루기 편리

 

장점

 - response timeout (fetch에는 없는 기능) 처리 방법이 있음. 

 - 크로스 브라우징 최적화로 브라우저 호환성이 뛰어남.

 - 구형 브라우저를 지원.

 

단점

 - 사용을 위해 라이브러리 설치가 필요.

npm install axios

 

---

fetch

JavaScript의 내장 라이브러리.

Promise기반으로 만들어졌기에 데이터를 다루기 편리.

 

장점

 - JavaScript의 내장 라이브러리로 별도의 import를 해줄 필요가 없다.

 - 업데이트에 따른 에러 방지가 가능.
→ 업데이트가 잦은 React Native의 경우 라이브러리가 쫓아가지 못하는 경우가 있는데, 이를 방지

 

단점

 - 지원하지 않는 브라우저가 있음. (... IE11).
 
 - 네트워크 에러 발생 시 response timeout이 없어 기다려야 함.

 - JSON으로 변환해주는 과정이 필요.

[Object → JSON]
JSON.stringify()

[JSON → Object]
JSON.parse()

 

---

참고 자료

https://www.npmjs.com/package/axios

axios

https://velog.io/@kysung95/%EA%B0%9C%EB%B0%9C%EC%83%81%EC%8B%9D-Ajax%EC%99%80-Axios-%EA%B7%B8%EB%A6%AC%EA%B3%A0-fetch

[개발상식] Ajax와 Axios 그리고 fetch

https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX

Ajax - Developer guides | MDN

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Fetch API - Web APIs | MDN