Axios

• 직관적인 API와 인터셉터, 요청 취소 등을 제공하여 HTTP 요청 작업을 쉽게 만들어줌
• RESTful API 호출 작업을 단순화할 수 있다

 

• Promise 기반 - 비동기 처리 쉬움
• 요청 / 응답 데이터 자동 변환 - JSON 데이터 자동으로 직렬화 / 역직렬화
• 요청 취소 - 요청을 취소할 수 있는 기능 제공 (CancelToken)
• 브라우저와 Node.js 지원 - 브라우저(XMLHttpRequest) / Node(HTTP 모듈) 을 기반으로 동작한다
• Interceptors - 요청 / 응답을 가로채 수정하거나 공통 로직 추가 가능
• 응답 시간 초과 설정 가능 - timeout 옵션으로 제한 시간 설정
• CSRF / 보안 - 자동으로 XSRF 토큰 관리 

 

설치 : npm install axios

브라우저 사용 : <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

 

사용

• GET

const axios = require('axios'); // Node.js 환경에서

axios.get('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
      console.log(response.data); // 응답 데이터
  })
  .catch(error => {
      console.error(error); // 에러 처리
  });

 

 

• POST

axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'foo',
    body: 'bar',
    userId: 1
  })
  .then(response => {
      console.log(response.data);
  })
  .catch(error => {
      console.error(error);
  });

 

• PUT

axios.put('https://jsonplaceholder.typicode.com/posts/1', {
    title: 'Updated Title',
    body: 'Updated Body',
    userId: 1
  })
  .then(response => {
      console.log(response.data);
  })
  .catch(error => {
      console.error(error);
  });

 

• DELETE

axios.delete('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
      console.log('Deleted:', response.data);
  })
  .catch(error => {
      console.error(error);
  });

 

 

옵션

• 기본 요청 설정

axios({
  method: 'get',
  url: 'https://jsonplaceholder.typicode.com/posts/1',
  timeout: 5000, // 5초 제한
  headers: {
    'Authorization': 'Bearer token'
  }
}).then(response => console.log(response.data));

• 기본 URL 설정

const instance = axios.create({
    baseURL: 'https://jsonplaceholder.typicode.com',
    timeout: 1000,
    headers: { 'Authorization': 'Bearer token' }
});

// GET 요청
instance.get('/posts/1').then(response => console.log(response.data));

 

 

Interceptors

• 요청 인터셉터

axios.interceptors.request.use(config => {
    console.log('Request Sent:', config);
    // 토큰 추가
    config.headers['Authorization'] = 'Bearer token';
    return config;
}, error => {
    return Promise.reject(error);
});

 

• 응답 인터셉터

axios.interceptors.response.use(response => {
    console.log('Response Received:', response);
    return response;
}, error => {
    console.error('Response Error:', error);
    return Promise.reject(error);
});

 

요청 취소 (CancelToken 사용)

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('https://jsonplaceholder.typicode.com/posts', {
    cancelToken: source.token
}).then(response => {
    console.log(response.data);
}).catch(thrown => {
    if (axios.isCancel(thrown)) {
        console.log('Request canceled', thrown.message);
    } else {
        console.error(thrown);
    }
});

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

 

 

Axios vs Fetch

특징	Axios	Fetch
기본 지원	라이브러리 설치 필요	브라우저 내장 API
Promise 지원	Promise 기반	Promise 기반
인터셉터 지원	요청 및 응답 인터셉터 제공	없음
데이터 자동 변환	JSON 자동 변환	수동으로 .json() 호출 필요
오류 처리	HTTP 오류 (4xx, 5xx)도 catch에서 처리 가능	네트워크 오류만 catch에서 처리 가능