Ajax

Asynchronous Javascript And Xml의 약자이며, 자바스크립트를 이용해 클라이언트와 서버 간에 데이터를 주고받는 비동기 HTTP 통신이다. XML 객체를 이용해서 전체 페이지가 아닌 필요한 데이터만 불러올 수 있다.

Ajax 장점

• jQuery를 통해 쉽게 구현 가능
• Error, Success, Complete의 상태를 통해 실행 흐름 조절 가능

Ajax 단점

• jQuery를 사용해야 간편하고 호환성이 보장됨
• Promise 기반이 아님

Axios

Node.js와 브라우저를 위한 Promise API를 활용하는 HTTP 통신 라이브러리.
비동기로 HTTP 통신을 할 수 있으며 return을 promise 객체로 해주기 때문에 response 데이터를 다루기 쉬움.

Axios 장점

• response timeout 처리 방법이 존재
• Promise 기반으로 만들어졌기 때문에 데이터 다루기 편리
• 브라우저 호환성이 뛰어남

Ajax 단점

• 사용을 위해 모듈 설치 필요(npm)

fetch

ES6부터 들어온 Javascript 내장 라이브러리
Promise 기반으로 만들어졌기 때문에 axios와 마찬가지로 데이터 다루기가 쉽고, 내장 라이브러리라는 장점

fetch 장점

• 자바스크립트의 내장 라이브러리 이므로 별도의 임포트가 필요없음
• Promise 기반으로 만들어졌기 때문에 데이터 다루기 편리
• 내장 라이브러리라서 업데이트에 따른 에러 방지

fetch 단점

• 지원하지 않는 브라우저가 존재
• 네트워크 에러 발생 시 response timeout 없이 기다려야함
• JSON으로 변환해주는 과정 필요
• 상대적으로 axios에 비해 기능 부족