Axios

Axios는 JavaScript에서 널리 사용되는 오픈 소스 라이브러리로, 웹 브라우저와 Node.js 환경에서 HTTP 요청을 쉽게 만들고 처리할 수 있게 해준다. Axios는 Promise를 기반으로 한 비동기 처리를 사용하며, RESTful API와 통신할 때 주로 사용된다. 다양한 HTTP 메서드 (GET, POST, PUT, DELETE 등)를 지원하며, JSON 데이터 처리 및 요청/응답 인터셉터와 같은 고급 기능을 제공.

 

주요 기능

1. Promise 기반: 비동기 HTTP 요청을 간편하게 처리할 수 있습니다.
2. 브라우저 및 Node.js 지원: 클라이언트와 서버 모두에서 사용 가능합니다.
3. 요청/응답 인터셉터: 요청이나 응답을 가로채서 필요한 처리를 수행할 수 있습니다.
4. 요청 취소: 이미 시작된 요청을 취소할 수 있습니다.
5. 자동 변환: JSON 데이터를 자동으로 변환해줍니다.
6. 기타 기능: 타임아웃, CSRF 보호, 에러 처리 등의 기능을 제공합니다.

설치 방법

npm install axios
yarn add axios

JavaScript 파일에서 Axios를 불러와 사용할 수 있다.

const axios = require('axios'); // Node.js 환경
// 또는
import axios from 'axios'; // ES6 모듈

기본적인 GET 요청을 보내는 방법

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

POST 요청을 보내는 방법

const data = {
  key1: 'value1',
  key2: 'value2'
};

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

요청을 보낼 때 헤더를 추가하거나, 타임아웃을 설정하는 등의 옵션을 지정할 수 있다.

axios.get('https://api.example.com/data', {
  headers: {
    'Authorization': 'Bearer ' + token
  },
  timeout: 5000
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error('Error:', error);
});

요청과 응답을 인터셉트하는 방법

// 요청 인터셉터
axios.interceptors.request.use(config => {
  // 여기에서 요청 설정을 수정할 수 있습니다.
  config.headers['X-Custom-Header'] = 'custom-header-value';
  return config;
}, error => {
  // 요청 에러 처리
  return Promise.reject(error);
});

// 응답 인터셉터
axios.interceptors.response.use(response => {
  // 여기에서 응답 데이터를 수정할 수 있습니다.
  response.data.customField = 'custom value';
  return response;
}, error => {
  // 응답 에러 처리
  return Promise.reject(error);
});