Axios는 브라우저와 Node.js 환경에서 모두 사용할 수 있는 Promise 기반의 HTTP 클라이언트 라이브러리입니다. 주로 웹 애플리케이션에서 서버와의 HTTP 통신을 간편하게 처리하기 위해 사용됩니다.
== 개요 ==
Axios는 2014년에 처음 출시되었으며, 현재 GitHub에서 활발하게 관리되고 있는 오픈 소스 프로젝트입니다. XMLHttpRequest 인터페이스를 기반으로 하며, JSON 데이터 변환, 요청/응답 인터셉트, 자동 변환, 클라이언트 사이드 XSRF 보호 등 다양한 기능을 제공합니다.
== 주요 기능 ==
- Promise API 지원: 비동기 요청 처리를 위한 Promise 기반 API를 제공합니다.
- 요청/응답 인터셉트: HTTP 요청과 응답을 가로채어 변형하거나 로깅할 수 있습니다.
- 자동 JSON 변환: 서버로부터 받은 JSON 데이터를 자동으로 JavaScript 객체로 변환합니다.
- 취소 요청: 요청을 취소할 수 있는 기능을 제공합니다.
- 동시 요청: 여러 요청을 동시에 수행하고 결과를 처리할 수 있습니다.
- CSRF 보호: 클라이언트 사이드 크로스 사이트 요청 위조 보호를 지원합니다.
- 브라우저/Node.js 호환: 두 환경 모두에서 사용 가능합니다.
== 설치 ==
=== npm ===
bash
npm install axios
=== yarn ===
bash
yarn add axios
=== CDN ===
html
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
== 기본 사용법 ==
=== GET 요청 ===
javascript
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});
=== POST 요청 ===
javascript
axios.post('/user', {
firstName: 'John',
lastName: 'Doe'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
=== 동시 요청 ===
javascript
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// 두 요청이 모두 완료됨
}));
== 구성 옵션 ==
Axios 요청 시 다양한 구성 옵션을 설정할 수 있습니다:
javascript
{
// 요청 URL
url: '/user',
// 요청 메서드 (기본값: 'get')
method: 'get',
// 기본 URL
baseURL: 'https://api.example.com',
// 요청 헤더
headers: {'X-Requested-With': 'XMLHttpRequest'},
// 요청 파라미터
params: {
ID: 12345
},
// 요청 데이터 (POST, PUT, PATCH 요청 시 사용)
data: {
firstName: 'John'
},
// 요청 타임아웃 (밀리초)
timeout: 1000,
// 응답 타입 (기본값: 'json')
responseType: 'json'
}
== 인터셉터 ==
요청이나 응답을 then 또는 catch로 처리하기 전에 가로챌 수 있습니다:
javascript
// 요청 인터셉터
axios.interceptors.request.use(function (config) {
// 요청 전 작업
return config;
}, function (error) {
// 요청 에러 처리
return Promise.reject(error);
});
// 응답 인터셉터
axios.interceptors.response.use(function (response) {
// 응답 데이터 처리
return response;
}, function (error) {
// 응답 에러 처리
return Promise.reject(error);
});
== 에러 처리 ==
Axios는 다양한 방식으로 에러를 처리할 수 있습니다:
javascript
axios.get('/user/12345')
.catch(function (error) {
if (error.response) {
// 서버가 2xx 범위를 벗어나는 상태 코드로 응답
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
// 요청이 이루어졌으나 응답을 받지 못함
console.log(error.request);
} else {
// 요청 설정 중 에러 발생
console.log('Error', error.message);
}
console.log(error.config);
});
== 취소 토큰 ==
요청을 취소하기 위해 취소 토큰을 사용할 수 있습니다:
javascript
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get('/user/12345', {
cancelToken: source.token
}).catch(function (thrown) {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// 에러 처리
}
});
// 요청 취소
source.cancel('Operation canceled by the user.');
== 인스턴스 생성 ==
사용자 정의 구성을 가진 Axios 인스턴스를 생성할 수 있습니다:
javascript
const instance = axios.create({
baseURL: 'https://api.example.com',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});
== 브라우저 지원 ==
Axios는 다음과 같은 브라우저를 지원합니다:
- Chrome
- Firefox
- Safari
- Edge
- Internet Explorer 11
== 관련 프로젝트 ==
- axios-retry: 요청 실패 시 자동 재시도 기능
- axios-mock-adapter: 테스트를 위한 모킹 어댑터
- vue-axios: Vue.js와의 통합
- react-axios: React 컴포넌트
== 참고 자료 ==
[[분류:JavaScript 라이브러리]]
[[분류:HTTP 클라이언트]]
[[분류:오픈 소스 소프트웨어]]