AJAX

ajax는 MDN에서 다음과 같이 정의하고 있다.

AJAX (Asynchronous JavaScript와 XML)는 XMLHttpRequest 기술을 사용해 복잡하고 동적인 웹페이지를 구성하는 프로그래밍 방식입니다.

AJAX는 전체 페이지가 다시 로드되지 않고 HTML 페이지 일부 DOM만 업데이트하는 좀 더 복잡한 웹페이지를 만들 수 있게 해줍니다. 또한 AJAX를 사용하면 웹페이지 일부가 리로드 되는 동안에도 코드가 계속 실행되어, 비동기식으로 작업할 수 있습니다. (동기적으로 움직이는 코드와 비교하자면 웹페이지가 로딩이 끝날 때 까지 당신의 코드는 움직이지 않습니다).

위 글을 간단하게 정리하자면, ajax는 비동기적으로 서버와 데이터를 주고 받을 수 있는 웹 기술을 의미한다. 여기서 비동기란, 웹 페이지를 새로 로드하지 않아도 서버와의 데이터를 주고받아 동적인 웹 페이지를 만들 수 있게 한다는 얘기다.

javascript에서 서버에 데이터를 요청하는 방식은 대표적으로 XMLHttpRequest, fetch(),axios가 존재한다.

XMLHttpRequest

이름 그대로 HTTP 요청을 전송하는 데에 사용하는데, XML이 붙었다고 XML 데이터만 처리하는 것이 아닌 JSON, HTML, 텍스트 등 다양한 데이터 형식을 주고받을 수 있다.

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      console.log(JSON.parse(xhr.responseText)); // JSON 변환 필요
    } else {
      console.error("Error fetching data");
    }
  }
};

xhr.send();

하지만 많은 콜백 요청으로 콜백 지옥을 야기할 수 있기 때문에, 코드가 길어지고 가독성이 떨어질 수 있다. 또한 응답 데이터를 JSON으로 직접 파싱 해줘야 한다.

fetch와 axios모두 마찬가지로 HTTP 요청을 보내는 데 사용되는 도구이다. 둘 다 Promise 기반이지만 axios의 경우 내부적으로 더 많은 기능을 제공한다.

fetch

fetch('<https://jsonplaceholder.typicode.com/posts/1>')
  .then(response => {
    if (!response.ok) {
      throw new Error('HTTP 오류: ' + response.status);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Fetch 에러:', error));

fetch의 경우 별도의 설치가 필요 없고, 브라우저에서 내장하고 있는 기능이다. 하지만 데이터를 받아올 때 response.json()을 통해 별도의 변환을 해줘야 하는 번거로움이 있다.

fetch('<https://jsonplaceholder.typicode.com/posts/9999>') // 존재하지 않는 리소스
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP 오류: ${response.status}`);
    }
    return response.json();
  })
  .catch(error => console.error('Fetch 에러:', error));

또한 HTTP 코드 상태가 4xx, 5xx여도 fetch는 catch를 호출하지 않기에, response.ok를 통해 직접 체크해야 한다.

axios

import axios from 'axios';

axios.get('<https://jsonplaceholder.typicode.com/posts/1>')
  .then(response => console.log(response.data))
  .catch(error => console.error('Axios 에러:', error));

axios의 경우 별도의 설치가 필요한 라이브러리이며, json 데이터를 reponse.data를 통해 자동으로 변환하여 반환한다.

axios.get('<https://jsonplaceholder.typicode.com/posts/9999>')
  .catch(error => console.error('Axios 에러:', error.response ? error.response.status : error.message));

또한, fetch에서 자동으로 처리해주지 않았던 error에 대해 자동 거절(reject)되므로 예외 처리가 더 수월하다. 또한 fetch에는 없는 인터셉터 기능을 제공하기 때문에 요청과 응답을 중간에서 가로채서 처리가 가능하다.

이외에도 데이터 요청을 취소하거나, 자체 타임아웃 기능을 제공하는 등의 편리함이 fetch보다 높아 axios가 일반적인 개발에서 많이 사용되는 편이다.

가벼운 데이터 요청에 대해선 별도의 설치 없이 fetch로 api를 호출해도 무방하지만, 편의성과 유지보수를 위해 axios를 사용하는 추세다.