[js] Ajax와 Axios 차이

웹개발을 하다보면 클라이언트와 서버간 데이터를 주고받기 위해 비동기 HTTP 통신을 하게된다.

이번에는 현재 Vue 개발하면서 사용중인 Axios와 Ajax를 비교하여 정리하려고 한다.

 

 

 

📝 AJAX (Asynchronous Javascript And Xml)

Ajax의 뜻을 보면 비동기식 자바스트립트와 XML이란 의미임을 알 수 있다.

자바스크립트를 이용해 클리이언트와 서버간 데이터를 주고받는 HTTP 통신이다.

javascript로 Web 화면에서 데이터를 부르거나 조회하고자 할때,  XMLHttpRequest(XHR) 객체는 반드시 필요하다.

이를 통해페이지 전체를 갱신할 필요 없이 필요한 데이터만 불러올 수 있다.

 

📌 특징

크게 3개자 형식으로 데이터를 전송한다.

 

1. CSV

-  , 로 데이터 속성을 나누고 줄바꿈으로 데이터를 나누는 방식.

- 용량이 적지만 가독성이 떨어진다.

 

2. XML

- CSV의 가독성을 개선하기 위한 형식으로 속성과 데이터를 구분한다.

- 용량이 크며 데이터가 많을시 분석력이 떨어진다.

 

3.JSON

- javascript 객체 형태로 전송이 가능하며 가장 많이 쓰이는 방법이다.

- 용량도 적고 가독성도 좋다.

 

💻 XMLHttpRequest(XHR) 예제

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() { // 요청에 대한 콜백
  if (xhr.readyState === xhr.DONE) { // 요청이 완료되면
    if (xhr.status === 200 || xhr.status === 201) {
      console.log(xhr.responseText);
    } else {
      console.error(xhr.responseText);
    }
  }
};
xhr.open('GET', 'https://localhost:3000'); // 메소드와 주소 설정
xhr.send(); // 요청 전송 
// xhr.abort(); // 전송된 요청 취소

💻 JQuery 예제

var serverAddress = 'https://localhost:3000';

// jQuery의 .get 메소드 사용
$.ajax({
    url: serverAddress,
    type: 'GET',
    success: function onData (data) {
        console.log(data);
    },
    error: function onError (error) {
        console.error(error);
    }
});

 

📌장점

- JQuery를 통해 쉽게 구현이 가능하다.

- Error, Success, Complete의 상태를 통해 실행 흐름 조절이 가능하다.

📌단점

- JQuery를 사용해야 간편하게 구현이 가능하며 호환성이 보장된다.

- Promise 기반이 아니다.

 

 

 

📝 Axios (Asynchronous Javascript And Xml)

node.js와 브라우저를위한 Promise API를 활용하는 HTTP 통신 라이브러리이다.

비동기로 HTTP 통신을 할 수 있으며 return을 Promise 객체로 하여 response 데이터를 다루기 쉽다.

 

📌장점

- Promise 기반으로 만들어져 데이터 다루기에 편리하다

- 구형 브라우저를 지원한다.

- 응답시간 초과를 설정하는 방법을 지원한다.

- 요청을 중단시킬 수 있다.

- 통신중 catch에 걸렸을때 .then을 실행하지 않고 콘솔에 에러를 보여준다

- JSON 데이터 자동변환이 가능하다

📌단점

- 사용을 위해 모듈을 설치해야한다. (npm install axios)

💻 예제

axios({
  method: 'post',
  url: 'https://localhost:3000/user',
  data: {
    userName: 'Jeongmin',
    userId: 'dev_Jm'
  }
}).then((response) => console.log(response));