Ajax vs Axios

Q.
Axios와 Ajax는 무슨 관계야?



A.
Axios와 Ajax는 둘 다 웹 브라우저에서 비동기 HTTP 요청을 보내기 위한 방법입니다. 하지만 둘 사이에는 몇 가지 차이점이 있습니다.

Ajax

Ajax(Asynchronous JavaScript and XML)는 웹 페이지에서 비동기적으로 서버와 데이터를 주고받기 위한 기술입니다. Ajax는 주로 XMLHttpRequest 객체를 사용하여 구현됩니다. Ajax를 사용하면 페이지를 새로 고침하지 않고도 서버와 통신할 수 있습니다.


Axios

Axios는 Ajax 요청을 더 쉽게 만들기 위해 설계된 JavaScript 라이브러리입니다. Axios는 Promise 기반으로 동작하며, HTTP 요청을 더 간단하고 직관적으로 작성할 수 있게 해줍니다. 또한, Axios는 JSON 데이터를 자동으로 변환하고, 요청 및 응답 인터셉터, 요청 취소, CSRF 보호 등 다양한 기능을 제공합니다.


주요 차이점

1. 사용 편의성: Axios는 더 간단하고 직관적인 API를 제공하여, XMLHttpRequest를 직접 사용하는 것보다 코드 작성이 더 쉽습니다.

2. Promise 지원: Axios는 Promise 기반으로 동작하여, 비동기 코드를 작성할 때 더 깔끔하고 가독성이 좋습니다.

3. 기능성: Axios는 요청 및 응답 인터셉터, 요청 취소, 자동 JSON 변환 등 다양한 기능을 제공합니다.


예시

Ajax (XMLHttpRequest)

var xhr = new XMLHttpRequest();
xhr.open('GET', '/someEndpoint', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var response = JSON.parse(xhr.responseText);
        console.log(response);
    }
};
xhr.send();


Axios

axios.get('/someEndpoint')
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error('Error:', error);
    });

이처럼 Axios는 Ajax 요청을 더 쉽게 만들기 위한 라이브러리로, 더 간단하고 강력한 기능을 제공합니다.