프론트엔드 개발자를 위한 Axios 입문

Axios는 자바스크립트에서 가장 많이 사용하는 HTTP 클라이언트 라이브러리 중 하나다. fetch API가 기본으로 제공되지만, Axios는 여러 면에서 개발자에게 더 직관적이고 편리한 사용 경험을 제공한다. 특히 REST API와 자주 소통하는 프론트엔드 개발자에게 필수 도구로 자리 잡았다.

 

목차

 

Axios

Axios는 Promise 기반의 HTTP 클라이언트로, 브라우저와 Node.js 모두에서 작동한다. 네트워크 요청을 보내고, 응답을 처리하며, 요청이나 응답을 가로채거나, 기본 설정을 지정할 수 있는 다양한 기능을 제공한다.

# 설치
npm install axios

 

사용법

import axios from 'axios';

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

axios.get(), axios.post(), axios.put(), axios.delete() 등 RESTful API 방식에 익숙한 메서드들을 바로 사용할 수 있다.

주요 특징

Axios는 Promise 기반의 HTTP 클라이언트로, 간결한 문법과 자동 JSON 변환, 요청/응답 인터셉터, 타임아웃 설정, 요청 취소 기능 등을 제공해 효율적인 비동기 통신을 지원한다.

 

Promise 기반

Axios는 ES6의 Promise를 기반으로 작동한다. 덕분에 비동기 처리를 더욱 **간결하고 직관적으로 작성할 수 있다. 비동기 요청이 성공했을 때는 .then(), 실패했을 때는 .catch()로 처리하면 된다.

axios.get('/user/123')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

이 방식은 콜백 지옥을 피하고, .finally()를 통한 정리 작업도 가능하게 한다.

 

요청 및 응답 인터셉터 (Interceptors)

요청을 보내기 전 또는 응답을 받은 후에 가로채어 **공통 로직을 추가할 수 있다. 토큰 설정, 로깅, 에러 처리 등에 유용하다.

// 요청 인터셉터
axios.interceptors.request.use(config => {
  config.headers.Authorization = 'Bearer token';
  return config;
});

// 응답 인터셉터
axios.interceptors.response.use(response => {
  return response;
}, error => {
  console.error('API 응답 오류:', error.response.status);
  return Promise.reject(error);
});

복잡한 프로젝트에서 중앙집중식 API 관리를 가능하게 한다.

 

자동 JSON 변환

서버에서 받은 응답이 JSON 형식이라면, Axios는 이를 **자동으로 JavaScript 객체로 파싱해준다. fetch에서는 .json()을 따로 호출해야 하지만, Axios는 불필요하다.

axios.get('/data')
  .then(res => {
    // 이미 JavaScript 객체로 변환된 상태
    console.log(res.data);
  });

실수 방지 및 코드 간결화에 기여한다.

 

타임아웃 설정 가능

Axios는 기본 요청 제한 시간을 설정할 수 있다. 서버가 응답하지 않을 때 무한정 기다리지 않고, 지정한 시간 이후에 요청을 자동으로 **실패 처리한다.

axios.get('/slow-api', { timeout: 3000 }) // 3초 초과 시 에러
  .catch(err => console.log('타임아웃 발생'));

네트워크 상태가 불안정할 때 앱이 멈추는 것을 방지할 수 있다.

 

요청 취소 기능 (CancelToken)

Axios는 CancelToken을 사용하여 **불필요한 요청을 취소할 수 있다. 검색창 자동완성 등에서 이전 요청을 취소하고 최신 요청만 반영할 때 유용하다.

const controller = new AbortController();

axios.get('/search?q=keyword', {
  signal: controller.signal
});

controller.abort(); // 요청 취소

사용자가 빠르게 입력할 때 중복된 트래픽 낭비를 줄이는 데 효과적이다.

 

CORS 정책 대응에 유리

fetch는 기본적으로 CORS 정책에 따라 엄격하게 제한된다. 하지만 Axios는 withCredentials, headers 등의 설정이 더 **명확하고 직관적하다.

axios.get('https://api.domain.com/data', {
  withCredentials: true // 쿠키 포함 요청
});

특히 백엔드에서 CORS를 허용해준 상태라면 Axios는 fetch보다 실용적인 설정이 가능하다.

반응형

Axios 주의사항

Axios는 자바스크립트에서 널리 사용되는 HTTP 클라이언트이지만, 무분별한 사용은 오류와 성능 저하를 초래할 수 있다. Axios 사용 시 꼭 알아야 할 주의사항들을 숙지하고 사용하는 것이 좋다.

 

에러 처리 방식

Axios는 HTTP 상태 코드가 200번대가 아닐 경우 자동으로 catch() 블록으로 에러를 전달한다. 이는 fetch()와 다르게 HTTP 오류도 예외로 처리하기 때문에 별도로 상태 코드를 확인하는 로직이 필요하다.

axios.get('/some-url')
  .then(response => {
    // 성공적인 응답
  })
  .catch(error => {
    if (error.response) {
      // 서버가 응답했지만 상태 코드가 200번대가 아님
      console.log('Status:', error.response.status);
    } else if (error.request) {
      // 요청은 되었지만 응답을 받지 못함
      console.log('No response received');
    } else {
      // 기타 에러
      console.log('Error', error.message);
    }
  });

axios.get()은 HTTP 요청을 보낼 때 then()과 catch()를 활용해 응답과 에러를 처리한다. 에러가 발생했을 때는 세 가지 경우로 나눠서 확인할 수 있다.

응답은 받았지만 오류 상태인 경우 (error.response)

서버가 요청에 대한 응답은 했지만 상태 코드가 200번대가 아닌 경우이다. 예를 들어 404(찾을 수 없음), 500(서버 오류) 같은 경우가 해당된다. 이 때는 error.response.status를 통해 상태 코드를 확인할 수 있다.

요청은 갔지만 응답이 없는 경우 (error.request)

네트워크 문제 등으로 인해 요청은 성공적으로 보내졌지만 서버로부터 아무런 응답을 받지 못한 경우이다. 이 때는 error.request 객체가 존재하지만 응답이 비어 있다.

요청 자체에서 문제가 발생한 경우 (기타 오류)

요청을 보내는 과정 자체에 오류가 있는 경우이다. 예를 들어 잘못된 설정이나 코드상 문제 등이다. 이 경우 error.message를 통해 오류 메시지를 확인할 수 있다.

 

인터셉터 남용

request와 response 인터셉터는 유용하지만, 무분별하게 등록할 경우 **글로벌 부작용이 발생할 수 있다. 특히 인터셉터 제거 (eject())를 하지 않으면 메모리 누수가 생길 수 있으므로 컴포넌트 언마운트 시 정리해야 한다.

 

중복 요청 취소 구현 필요

같은 요청을 여러 번 보내는 상황에서는 CancelToken 또는 AbortController를 사용해 **불필요한 네트워크 낭비를 방지해야 한다.

const controller = new AbortController();

axios.get('/data', { signal: controller.signal })
  .catch(err => {
    if (axios.isCancel(err)) {
      console.log('요청이 취소되었습니다');
    }
  });

// 나중에 조건에 따라 요청 취소
controller.abort();

AbortController 생성

AbortController 객체를 만들어 요청을 제어할 수 있는 컨트롤러를 생성한다.

Axios 요청 시 signal 전달

axios.get() 호출 시 옵션에 signal: controller.signal을 추가해서, 해당 컨트롤러와 요청을 연결한다.

요청 취소 처리

요청을 취소할 때는 controller.abort()를 호출한다. 그러면 연결된 요청이 중단된다.

취소된 요청 에러 처리

요청이 취소되면 Axios의 에러 객체가 axios.isCancel(err)로 구분된다. 이 경우 "요청이 취소되었습니다"라는 메시지를 출력한다

 

타임아웃 설정

기본적으로 Axios는 타임아웃이 무제한이다. 응답이 오지 않아도 계속 대기하게 되므로, **네트워크 안정성을 고려하여 적절한 타임아웃 설정이 필요하다.

axios.get('/slow-api', { timeout: 5000 })
  .catch(error => {
    if (error.code === 'ECONNABORTED') {
      console.log('요청 시간 초과');
    }
  });

타임아웃 설정

axios.get() 요청에 { timeout: 5000 } 옵션을 추가하여, 5초(5000ms) 내에 응답이 없으면 요청을 자동으로 중단한다.

시간 초과 에러 처리

요청이 지정한 시간 안에 완료되지 않으면 에러가 발생한다. 이때 에러 객체의 error.code가 'ECONNABORTED'로 설정된다.

에러 분기 처리

catch 블록에서 error.code === 'ECONNABORTED'를 검사하여, 시간 초과 상황일 때 "요청 시간 초과" 메시지를 출력한다.