[LG CNS AM Inspire Camp 1기] Axios vs Fetch API

정성엽·2025년 1월 1일

Fetch LG CNS AM Inspire Camp am axios http https

LG CNS AM Inspire 1기

목록 보기

10/53

INTRO

웹 개발을 하다 보면 HTTP 통신은 필수적인 요소이다.

특히 프론트엔드 개발자라면 한 번쯤은 Fetch API와 Axios 중 어떤 것을 사용할지 고민해봤을 수 있다.

(필자는 사실 아직 프로젝트에서 Axios를 제대로 사용해본적은 없다..)

따라서 이번 포스팅에서는 Fetch와 Axios의 차이점을 Promise 처리 방식, 기능적 측면, 코드적 측면에서 살펴보고 정리해볼 예정이다!

1. Promise 처리 방식의 차이

💡 JSON 데이터 처리 방식

우선 Fetch와 Axios는 가장 기본이 되는 JSON 데이터 처리 방식부터 차이가 발생한다.

Fetch API

2번에 걸친 Promise 처리가 필요하다.

fetch('https://api.example.com/data')
  .then(response => response.json())  // 첫 번째 Promise
  .then(data => {                     // 두 번째 Promise
    console.log(data);
  });

Axios

단일 Promise로 처리가 가능하다.

axios.get('https://api.example.com/data')
  .then(response => {
  	// 자동으로 JSON 변환됨
    console.log(response.data);  
  });

이러한 차이점은 결국 async/await를 이용하여 비동기 처리를 진행할때도 마찬가지로 적용된다.

Fetch API

2번의 Promise 객체 처리가 필요하다.

const getData = async () => {
  const response = await fetch('https://api.example.com/data'); // 첫 번째 await
  const data = await response.json();                          // 두 번째 await
  return data;
};

Axios

한번의 처리로 데이터를 사용할 수 있다.

const getData = async () => {
  const { data } = await axios.get('https://api.example.com/data'); // 한 번의 await
  return data;
};

이러한 차이가 발생하는 이유는 Fetch가 Body를 스트림(요청 스트립 / 응답 스트림)으로 처리하기 때문이다.

즉, 응답 데이터를 사용하기 위해 별도의 메서드로 파싱하는 과정이 필요한 것이다.

간단한 예시를 살펴보자

Example

Axios

Sample Code

axios.get("https://jsonplaceholder.typicode.com/posts")
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  });

Console View

Fetch API

Sample Code

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "GET",
})
  .then((res) => {
    console.log(res);
    return res.json();
  })
  .catch((err) => {
    console.log(err);
  });

Console View

위 두 코드는 각각 예시로 제공된 Axios와 Fetch API를 사용해서 첫번째 응답 객체를 콘솔에 출력하고 있다.

사진에서 확인할 수 있다시피, Axios는 바로 data를 사용할 수 있지만, Fetch API는 ReadableStream 형태로 response가 제공되어 한번더 파싱이 필요한 상태임을 확인할 수 있다.

즉, 개발자가 사용하기 편한 방법은 아무래도 Fetch API 보다는 Axios라고 생각할 수 있다! (간단하니까!)

2. 기능적 측면의 차이

💡 기본 설정의 차이

HTTP 요청의 기본 설정에서도 차이가 존재한다.

Fetch API

Fetch - credentials 수동 설정 필요

헤더 타입 설정 필요
fetch(url, {
  credentials: 'include',
  headers: {
    'Content-Type': 'application/json'
  }
});

Axios

credentials, headers 등 기본값 제공
axios.get(url); 

마찬가지로 axios가 대부분의 기능을 기본값으로 제공해주기 때문에 훨씬 간편한 것을 확인할 수 있다.

💡 타임아웃 처리

시간 초과 설정도 두 기능은 다르게 처리한다.

Fetch API

직접 구현 필요
Promise.race를 이용해서 먼저 동작하는 코드를 실행

const timeoutFetch = (url, timeout = 5000) => {
  return Promise.race([
    fetch(url),
    new Promise((_, reject) => 
      setTimeout(() => reject(new Error('Timeout')), timeout)
    )
  ]);
}

Axios

내장 기능으로 제공
axios.get(url, {
  timeout: 5000
});

실제로 타임아웃은 에러 핸들링을 처리하는 과정에서 사용하기 때문에 간편한 axios에 메리트가 있다고 생각한다.

3. 성능적 측면의 차이

💡 자동화된 데이터 처리

Axios는 내부적으로 최적화된 데이터 변환 메커니즘을 가지고 있다.

Fetch API

매 요청마다 수동 변환 필요

const fetchData = async () => {
  try {
    const response = await fetch('/api/data');
    if (!response.ok) throw new Error('Network response was not ok');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error:', error);
  }
};

Axios

자동 변환 및 에러 처리

const axiosData = async () => {
  try {
    const { data } = await axios.get('/api/data');
    return data;
  } catch (error) {
    console.error('Error:', error);
  }
};

Fetch API를 사용하는 코드에서는 response.ok를 확인하고 에러를 던지고 있다.

이런 동작도 API Boundary를 만들어서 처리할 수 있겠지만, Axios를 사용하는게 더 간단하다!

💡 캐싱과 인터셉터

Axios는 강력한 캐싱과 인터셉터 기능을 제공한다.

Axios

인터셉터 예시 코드

axios.interceptors.request.use(config => {
  // 요청 전에 수행할 작업 지정
  return config;
});

axios.interceptors.response.use(response => {
  // 응답 데이터 가공 지정
  return response;
});

Axios

axios가 제공하는 캐싱 기능

import axios from 'axios';
import { setupCache } from 'axios-cache-adapter';

const api = setupCache({
  baseURL: 'https://api.example.com',
  cache: {
    maxAge: 15 * 60 * 1000, // 캐시 유효 시간 15분
    exclude: {
      methods: ['post']
    }
  }
});


const getData = async () => {
  try {
    const { data, request } = await api.get('/data');
    console.log('캐시에서 가져옴:', request.fromCache);
    return data;
  } catch (error) {
    console.error('Error:', error);
  }
};