Axios
Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 라이브러리.
주로 웹 앱에서 서버와의 HTTP 요청을 보내거나 데이터를 받아올때 사용. → 요청 /응답이 간편함
참조 : https://axios-http.com/kr/docs/intro
⭐️ Axios의 특징
- 간편한 API: Axios의 API는 쉽고 직관적이며, HTTP 요청을 만들고 응답을 처리하는 데 필요한 다양한 기능 제공.
- Promise 기반: Axios 요청은 Promise를 반환하므로, 비동기 코드를 작성이 쉬움.
- 자동 변환: Axios는 자동으로 JSON 데이터를 자바스크립트 객체로 변환.
- 인터셉터 제공: Axios는 요청이나 응답을 보내기 전후에 수정할 수 있는 인터셉터를 제공. (글로벌한 수정 및 로깅에 유용)
🛠️ Axios 설치
NPM
$ npm install axiosCDN
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
✏️ Axios 사용
아래는 액시오스의 예시입니다.
// Axios 라이브러리 import
import axios from 'axios';
// GET 요청 보내기
axios.get('https://api.example.com/data')
.then(response => {
// 성공적인 응답 처리
console.log('데이터:', response.data);
})
.catch(error => {
// 오류 처리
console.error('오류 발생:', error);
});위 코드에서는 Axios를 사용하여 'https://api.example.com/data'로 GET 요청을 보내고,
성공하면, 응답 데이터를 콘솔에 출력하고, 오류 발생 시, 오류를 콘솔에 출력합니다.
Axios는 다양한 HTTP 요청 메서드(GET, POST, PUT, DELETE 등)와 다양한 옵션을 지원하므로 다양한 상황에서 활용 가능합니다.
추가로 , Axios와 같이 웹 개발에서 서버와의 통신을 담당하는 도구지만 차이점이 있는 Ajax가 있습니다.
몇가지 부분에서 비교한 내용 입니다.
| Axios | Ajax | |
| 라이브러리 vs. 기술 스택 | Promise 기반의 HTTP 클라이언트 라이브러리 | XMLHttpRequest 객체로 비동기적 통신하기 위한 기술 스택 |
| 문법 및 API | 간결하고 직관적인 API. 설정, 인터셉터 기능 등으로 요청/응답 다루기 쉬움 |
많은 양의 코드 작성이 필요 |
| 브라우저 지원 | 브라우저 및 Node.js와 같은 환경에서 모두 사용 | 오래된 브라우저에서 지원되지 않거나 브라우저 간 차이가 있을 수 있음 |
| 자동 데이터 변환 | 응답 데이터를 자동으로 JSON에서 JavaScript 객체로 변환 | 자동 변환 불가 |
| 편의성 및 유지보수 | 모던 자바스크립트 사용으로 코드 작성이 편리함. 인터셉터와 같은 고급 기능들을 활용하여 더욱 풍부한 기능을 제공 |
상대적으로 수동으로 처리 작업 많음 |
Promise : 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise