[4주차] AXIOS 알아보기

 

안녕하세요 35기 YB 김린아입니다. 

4주차 아티클은 4주차 과제를 하며 처음 접하게 된 AXIOS에 대해 작성해 보았습니다.

 

 

 

 

1. Axios란

AXIOS는 JavaScript에서 HTTP 요청을 간단하게 처리할 수 있도록 도와주는 HTTP 클라이언트 라이브러리로, 주로 promise를 기반으로 하며 브라우저와 Node.js 환경에서 모두 사용할 수 있다. Axios는 코드가 직관적이고, 간결한 API를 제공하는 것이 특징이다.

 

2. Axios의 주요 기능

• 간결한 API

Axios는 기본적으로 HTTP 요청을 axios.get, axios.post, axios.put, axios.delete 등 메서드를 통해 수행할 수 있어 RESTful API와 상호 작용하는 데 매우 유리하다. 

• 자동 JSON 데이터 처리

브라우저에서 제공하는 기본 fetch API를 사용하면 서버로부터 받은 데이터를 JSON으로 변환해야 하는 반면, Axios는 이를 자동으로 처리해주어 데이터 변환에 소요되는 시간을 절약할 수 있으며, 코드가 더 깔끔해진다.

• 요청 및 응답 데이터 가공

Axios는 요청을 보내기 전과 응답을 받기 전, 두 시점에서 데이터를 가공할 수 있는 interceptors 기능을 제공한다. 이를 통해 인증 토큰을 자동으로 추가하거나, 요청의 특정 조건을 확인하고 가공하여 보낼 수 있다.

• 쿼리 파라미터 사용

URL의 쿼리 스트링을 설정할 때, params 옵션을 통해 간단하게 관리할 수 있다. 이는 URL을 동적으로 구성할 때 매우 유용하다.

• 요청 취소

긴 응답 시간을 가진 API나 불필요한 요청이 발생할 경우, Axios는 요청 취소 기능을 통해 이를 쉽게 중단할 수 있다. 특히, 실시간 데이터나 검색 자동 완성 기능에서 유용하게 사용된다.

• 타임아웃 설정 및 에러 핸들링

Axios는 요청 타임아웃을 설정하여 응답이 지연될 경우, 자동으로 요청을 중단할 수 있다. 그리고 다양한 에러 상황(404, 500 등)을 구분하여 핸들링할 수 있어 예외 상황에 대한 처리 로직을 간단히 구현할 수 있다.

 

3. Axios 설치 및 기본 사용법

• 설치

npm install axios

• 기본 사용 예제

import axios from 'axios';

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

// POST 요청
axios.post('https://api.example.com/data', {
    name: 'John',
    age: 30
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

 

 

4. 고급 기능

•  Interceptors (인터셉터)

인터셉터를 사용하여 요청을 보내기 전이나 응답을 받은 후 특정 작업을 추가할 수 있으며,

인증 토큰을 자동으로 헤더에 추가하는 데 자주 사용된다.

// 요청 인터셉터 추가
axios.interceptors.request.use(
  config => {
    // 요청을 보내기 전에 작업 수행
    config.headers.Authorization = 'Bearer ' + localStorage.getItem('token');
    return config;
  },
  error => {
    // 오류 요청을 보내기 전 작업 수행
    return Promise.reject(error);
  }
);

• 요청 취소

CancelToken을 통해 요청을 취소 할 수 있으며,

검색 자동 완성과 같은 기능에서 이전 요청을 중단하고 새로운 요청을 보낼 때 유용하다.

const source = axios.CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});

// 요청 취소
source.cancel('Operation canceled by the user.');

• 타임아웃 설정

타임아웃을 설정하면 설정된 시간 내에 응답이 오지 않을 경우, 자동으로 요청을 취소한다.

axios.get('/long-request', { timeout: 1000 })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.code === 'ECONNABORTED') {
      console.error('Request timed out');
    } else {
      console.error('Error:', error.message);
    }
  });

 

5. Axios & fetch 비교

기능	Axios	Fetch
JSON 자동 처리	응답 데이터를 자동으로 JSON 파싱	res.json()을 통해 수동으로 파싱 필요
요청 취소	Cancel Token을 통해 요청 취소 가능	기본 fetch에는 제공되지 않으며, AbortController 필요
타임아웃 설정	지원	기본 fetch에는 제공되지 않음
Interceptors (인터셉터)	요청과 응답에 인터셉터 적용 가능	지원하지 않음
에러 핸들링	HTTP 상태 코드와 관련한 에러를 자동으로 처리	400 및 500 에러의 경우 수동으로 핸들링 필요

 

6. Axios 사용 팁

> 반복적인 설정

: 기본 URL이나 공통 헤더는 axios.create()를 통해 인스턴스를 생성하여 설정 할 수 있다.

 

> 로딩 상태 관리

: 요청이 진행 중/성공/실패 상태인지 확인하여 로딩 상태를 관리 할 수 있다.

 

> API 모듈화

: API 요청을 모듈화하여 코드 재사용성을 높이고, 유지보수하기 쉽게 만들 수 있다.

 

 

7. 결론

Axios는 JavaScript와 React 환경에서 HTTP 요청을 더 쉽게 관리할 수 있는 도구로 JSON 자동 변환, 인터셉터, 요청 취소, 에러 핸들링, 타임아웃 설정 등 다양한 기능을 통해 코드를 간결하게 유지하고 복잡한 네트워크 요청을 간단하게 처리 하는 것을 돕는다. 따라서 서버와의 상호작용이 빈번한 프로젝트에서 매우 유용하며, 특히 RESTful API를 자주 사용하는 애플리케이션에서 필수로 사용되는 도구이다.