자바스크립트에서 비동기로 API 호출하는 3가지 방법 (Fetch, Axios, XMLHttpRequest)

by

1. 비동기 API 호출이란?

웹 애플리케이션에서는 API 호출을 통해 데이터를 가져오거나 서버와 통신하는 것이 필수적이다. 하지만, API 호출은 네트워크 지연 시간이 존재하기 때문에 비동기 방식으로 처리하는 것이 일반적이다.

자바스크립트에서 API를 호출하는 방법은 크게 다음 3가지가 있다:

  1. XMLHttpRequest (구식 방법)
  2. fetch() (최신 표준)
  3. Axios (서드파티 라이브러리)

이번 포스팅에서는 이 3가지 방법을 비교하고, 각각의 장단점을 알아보겠다.

2. XMLHttpRequest (XHR) – 구식 방식

XMLHttpRequest(XHR)는 가장 오래된 API 호출 방식이다. 지금은 fetch()와 같은 더 간단한 대체제가 있지만, 구형 브라우저 지원이 필요할 경우 여전히 사용할 수 있다.

2.1 XMLHttpRequest 기본 사용법

const xhr = new XMLHttpRequest();

xhr.open("GET", "https://jsonplaceholder.typicode.com/todos/1", true);

xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log("응답 데이터:", JSON.parse(xhr.responseText));
    }
};

xhr.send();

2.2 XMLHttpRequest의 단점

  • 콜백 기반이므로 코드 가독성이 떨어진다.
  • 에러 핸들링이 복잡하다.
  • 최신 API에 비해 코드가 장황하다.

3. Fetch API – 최신 표준

fetch()는 최신 자바스크립트 표준으로, API 호출을 보다 간결하고 직관적으로 처리할 수 있다.

3.1 Fetch 기본 사용법

fetch("https://jsonplaceholder.typicode.com/todos/1")
    .then((response) => response.json())
    .then((data) => console.log("응답 데이터:", data))
    .catch((error) => console.log("에러 발생:", error));

3.2 Async/Await을 활용한 Fetch

async function fetchData() {
    try {
        const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
        const data = await response.json();
        console.log("응답 데이터:", data);
    } catch (error) {
        console.log("에러 발생:", error);
    }
}

fetchData();

3.3 Fetch API의 장점

  • Promise 기반으로 가독성이 좋다.
  • 더 적은 코드로 API 요청 가능
  • async/await과 함께 사용하면 더욱 직관적인 코드 작성 가능

3.4 Fetch API의 단점

  • 기본적으로 네트워크 오류만 catch()에서 감지 가능
  • HTTP 응답 코드(404, 500 등)를 자동으로 에러로 처리하지 않음

4. Axios – 강력한 서드파티 라이브러리

Axios는 Promise 기반의 HTTP 요청 라이브러리로, fetch()보다 강력한 기능을 제공한다. 특히, 자동 JSON 변환, 요청 취소, 응답 타임아웃, HTTP 응답 코드 자동 에러 처리 등의 기능을 제공한다.

4.1 Axios 설치 방법

Axios는 기본적으로 내장된 기능이 아니므로, 설치가 필요하다.

npm install axios

4.2 Axios 기본 사용법

const axios = require("axios");

axios.get("https://jsonplaceholder.typicode.com/todos/1")
    .then((response) => console.log("응답 데이터:", response.data))
    .catch((error) => console.log("에러 발생:", error));

4.3 Async/Await을 활용한 Axios

async function fetchData() {
    try {
        const response = await axios.get("https://jsonplaceholder.typicode.com/todos/1");
        console.log("응답 데이터:", response.data);
    } catch (error) {
        console.log("에러 발생:", error);
    }
}

fetchData();

4.4 Axios의 장점

  • 자동 JSON 변환 (fetch는 response.json()을 호출해야 함)
  • HTTP 응답 코드 자동 에러 처리 (status !== 200이면 자동으로 catch() 실행)
  • 요청 취소 및 타임아웃 기능 제공
  • 인터셉터(Interceptor) 기능 제공 (요청/응답 전처리 가능)

4.5 Axios의 단점

  • fetch()보다 라이브러리 설치가 필요함
  • 파일 크기가 큼 (fetch는 기본 내장 API)

5. 세 가지 방식 비교 정리

비교 항목XMLHttpRequestFetch APIAxios
코드 가독성복잡하고 길다간결하고 직관적더 많은 기능을 제공하지만 직관적
JSON 변환.responseText로 변환 필요.json() 호출 필요자동 변환
에러 처리복잡함HTTP 오류를 자동으로 throw하지 않음HTTP 응답 코드 기반 자동 에러 처리
요청 취소불가능불가능가능
요청 타임아웃기본 제공 안됨기본 제공 안됨가능

6. 결론

  • XMLHttpRequest는 구식 방식으로, 새로운 프로젝트에서는 사용을 권장하지 않는다.
  • fetch()는 가장 최신의 표준 방식이며, 간결하고 직관적인 API 요청을 지원한다.
  • Axios는 보다 강력한 기능을 제공하는 라이브러리로, 복잡한 API 요청이 필요할 경우 유용하다.

📌 추천 가이드

  • 단순한 API 요청: fetch() 사용
  • 고급 기능(인터셉터, 요청 취소, 자동 JSON 변환 등)이 필요할 경우: Axios 사용

다음 포스트에서는 **”Node.js 비동기 프로그래밍 최적화: 효율적인 데이터 처리 방법”**을 다루겠다.

Leave a Comment