Axios

오늘은 통신 라이브러리 중 하나인 Axios에 대해서 간단히 포스팅 해보려 한다.

 

Axios 란?

Axios는 브라우저 용 promise 기반 HTTP 클라이언트 이다.

간단히 말해 서버와 데이터를 주고받을 수 있게 도와주는 라이브러리이다.

 

*여기서 Promise 기반 이란?

Promise는 비동기 작업의 결과(성공/실패)를 다루는 JavaScript 객체이다.

예를 들어, 서버에서 데이터를 받아오는 시간이 걸리는 작업을 처리할 때 유용하게 쓰인다.

 

그렇다면 Promise 기반 이란건 어떤 의미일까

예시코드를 통해서 좀 더 간단하게 이해해보자.

 

axios.get('https://api.Sam-Shop.com/상품정보')

 

이 코드는 택배를 주문한것(요청)과 같다.
바로 결과(상품)가 나오는게 아니라 결과값이 올 때까지 기다려야 한다.

주문하자마자 바로 도착하지 않듯, 요청을 보내도 결과는 시간이 지나야 도착하기 때문이다.

 

이러한 처리를 유연하게 하기 위해서 Axios에게 약속을 받는다

axios.get('api.Sam-Shop.com/상품정보')
.then(응답 => { // 성공했을 때 실행할 코드
console.log("상품 도착!");
})
.catch(error => { // 실패했을 때 실행할 코드
console.log("배송중 문제가 생겼음!");
});

 

axios는 택배가 도착하면 상품도착 이라는 로그를 호출하고

배송중에 문제가 생길경우 배송중 문제가 생겼다는 로그를 호출하게 "약속"을 받는다.

 

여기서 말하는 약속들이 axios.get()이 Promise객체를 반환하기 때문에 가능한 것이다.

Axios가 "Promise 기반" 이라는 말은, Axios의 함수들이 비동기 작업을 처리할 때 Promise를 반환한다는 의미를 뜻하고

Promise객체는 성공,실패 처리를 .then() / .catch()로 간결하게 관리할 수 있다.

 

이런 구조를 "Promise 기반" 이라고 한다.

 

 

Axios의 특징

 

• 브라우저에서 XMLHttpRequest 요청을 보낼 수 있음
• Node.js 환경에서도 HTTP 요청을 보낼 수 있음
• Promise API를 지원함
• 요청(request)과 응답(response)을 가로채서(intercept) 처리 가능
• 요청 및 응답 데이터를 변환할 수 있음
• 요청 취소 기능 지원
• 요청 타임아웃 설정 가능
• 중첩된 객체까지 지원하는 쿼리 파라미터 직렬화 가능
• 요청 본문 자동 직렬화:
  • JSON (application/json)
  • FormData (multipart/form-data)
  • URL 인코딩 폼 (application/x-www-form-urlencoded)
• HTML 폼 데이터를 JSON으로 전송 가능
• 응답 데이터를 자동으로 JSON으로 처리
• 브라우저 및 Node.js에서 진행 상태(progress) 추적 가능 (속도, 남은 시간 등 포함)
• Node.js에서 네트워크 대역폭 제한 설정 가능
• 명세에 맞는 FormData 및 Blob 객체와 호환 (Node.js 포함)
• XSRF(교차 사이트 요청 위조) 공격 방지를 위한 클라이언트 측 보안 기능 제공

공식문서에 기재되어 있는 Axios의 특징이다.

 

현재 진행하고 있는 프로젝트에서는

Promise기반 응답처리,자동 JSON 파싱, 요청 & 응답 인터셉트 및 에러 처리 등등

Axios의 특징을 여러방면에서 이용하고 있다.

 

이러한 특징들에 대한 예제는 추후 포스팅으로 다루어 보고

재정리 해서 Axios에 관한 포스팅을 진행해 보도록 하겠다.