[Js] ajax vs fetch vs axios

AJAX

• AJAX는 "Asynchronous JavaScript and XML"의 약자입니다.
• 자바스크립트를 사용하여 웹 페이지를 다시 로드하지 않고도 서버와 데이터를 교환할 수 있게 해줍니다.
• 일반적으로 XMLHttpRequest 객체를 사용하여 데이터를 비동기적으로 요청하고 받아옵니다.
• 예전에 많이 사용되었지만, 요즘에는 Fetch API나 라이브러리들이 더 선호됩니다.

예제

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.error('Error:', xhr.status);
    }
  }
};
xhr.send();

장단점

장점: 브라우저에서 기본적으로 제공되므로 별도의 라이브러리나 패키지를 설치할 필요가 없습니다.
단점: 비교적 사용법이 복잡하고 코드가 길어질 수 있습니다.
콜백 지옥(callback hell)에 빠질 수 있으며, 코드의 가독성과 유지보수성이 떨어질 수 있습니다

Fetch API

• Fetch API는 네트워크 요청을 보내고 응답을 다루는 기능을 제공합니다.
• Promise 기반으로 비동기적으로 요청을 처리합니다.
• 브라우저에서 기본적으로 제공되므로 별도의 라이브러리나 패키지를 설치할 필요가 없습니다.
• 간단하고 강력한 기능을 제공하며, 많은 웹 개발자들이 사용하고 있습니다.

예제

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

장단점

장점: 간단하고 직관적인 API를 제공합니다.
Promise를 기반으로 하여 비동기 코드를 보다 깔끔하게 작성할 수 있습니다.
단점: 오래된 브라우저에서는 지원되지 않을 수 있으므로 폴리필(polyfill)이 필요할 수 있습니다.
기능이 제한적일 수 있으며, 좀 더 복잡한 요청을 다루기에는 다소 부족할 수 있습니다.

Axios

• Axios는 HTTP 클라이언트 라이브러리로, 브라우저와 Node.js 환경에서 모두 사용할 수 있습니다.
• Promise 기반으로 비동기적으로 HTTP 요청을 처리합니다.
• 간단하고 직관적인 API를 제공하여 데이터 요청 및 응답을 다루기 쉽습니다.
• 요즘에는 React 개발에서 많이 사용되며, 특히 RESTful API와의 통신에 유용합니다.

예제

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

장단점

장점: 간단한 API를 제공하면서도 다양한 설정과 기능을 제공합니다.
HTTP 요청과 응답을 다루는데 편리한 메서드와 인터셉터(interceptor)를 제공합니다.
단점: 추가적인 라이브러리로 설치해야 하므로 번들 크기가 커질 수 있습니다.
기본적으로 브라우저와 Node.js 환경에서만 사용할 수 있으므로, 리액트 네이티브와 같은 다른 환경에서는 사용할 수 없습니다.