AJAX, Axios, Fetch

1. 개념
2. AJAX (Asynchronous JavaScript and XML)
3. Fetch API
4. Axios
5. 비교
6. 결론

개념

• HTTP 요청을 통해 데이터를 서버와 주고받기 위해 사용되는 기술 또는 라이브러리

AJAX (Asynchronous JavaScript and XML)

• 특징

  • AJAX는 기술적인 개념으로, XMLHttpRequest(XHR) 객체를 사용하여 비동기 요청을 보내는 방법
  • JSON, XML, HTML, 또는 텍스트 데이터를 서버로부터 가져옴.
  • ES6 이전에 널리 사용되었으며, 지금도 브라우저 호환성이 중요한 경우 사용.

• 장점

  • 오래된 브라우저까지 지원.
  • 서버와 비동기적으로 데이터를 주고받는 기본적인 방법.

• 단점

  • 코드가 장황하고, 복잡한 비동기 흐름을 처리하기 어려움.
  • 프로미스(Promise)를 기본적으로 지원하지 않음.

• 예제

  const xhr = new XMLHttpRequest();
  xhr.open("GET", "https://jsonplaceholder.typicode.com/posts", true);
  xhr.onreadystatechange = () => {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  }
  };
  xhr.send();

Fetch API

• 특징
  • Fetch API는 ES6에서 도입된 내장 함수로, 비동기 요청을 처리 가능.
  • Promise 기반으로 설계되어 더 간결하고 읽기 쉬운 코드 작성이 가능.
  • JSON 데이터를 쉽게 처리 가능.
• 장점
  • Promise를 지원하여 비동기 처리가 간편.
  • Fetch API는 HTTP 요청/응답 흐름을 직관적으로 표현.
  • 최신 브라우저에서 기본 지원.
    단점
  • HTTP 요청이 실패해도 에러를 던지지 않고, Promise가 resolve됨. (상태 코드 확인 필요)
  • AbortController 없이 타임아웃 제어 불가.
  • 오래된 브라우저에서는 polyfill이 필요.
• 예제

  fetch("https://jsonplaceholder.typicode.com/posts")
  .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("Fetch error:", error));

Axios

• 특징

  • Axios는 Fetch보다 기능이 풍부한 Promise 기반의 HTTP 요청 라이브러리.
  • Fetch의 단점을 보완하여 더 강력한 기능 제공.
  • JSON 변환, 요청 취소, 타임아웃, 기본 헤더 설정 등을 내장.

• 장점

  • 자동 JSON 변환: 요청/응답 데이터를 JSON으로 자동 처리.
  • 요청 취소 기능: CancelToken 또는 AbortController 사용 가능.
  • 타임아웃 설정 가능: 요청에 타임아웃을 간단히 추가.
  • 인터셉터 지원: 요청 또는 응답을 전처리하거나 후처리 가능.
  • Node.js에서도 사용 가능.

• 단점

  • 추가적인 라이브러리 설치가 필요.
  • 브라우저 기본 API가 아니라서 약간의 오버헤드 발생.

• 예제

  import axios from "axios";
  
  axios
    .get("https://jsonplaceholder.typicode.com/posts")
    .then((response) => console.log(response.data))
    .catch((error) => console.error("Axios error:", error));
  

비교

결론

• 소규모 프로젝트에서는 Fetch API를 선호.
• 대규모 프로젝트 또는 복잡한 요구사항(타임아웃, 인터셉터 등)이 있다면 Axios가 더 적합.
• AJAX(XHR)는 레거시 코드 유지보수나 오래된 브라우저 지원이 필요한 경우에만 사용.