AXIOS 란?
- Axios 는 브라우저, Node.js 를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다.
- 백엔드랑 프론트엔드 간의 원활한 통신을 위해 Ajax와 더불어 사용한다.
- 이미 JS 에는 fetch api 가 있지만, 프레임워크에서 ajax 를 구현할 땐 axios 를 쓰는 편이다.
axios의 특징
- 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js 의 http api 사용
- Promise API 사용
- 요청과 응답 데이터의 변형
- HTTP 요청 취소
- HTTP 요청과 응답을 JSON 형태로 자동 변경
| axios | fetch |
| 써드파티 라이브러리로 설치가 필요 | 현대 브라우저에 빌트인이라 설치 필요 없음 |
| XSRF를 보호 해줌 | 별도 보호 X |
| data 속성 사용 | body 속성 사용 |
| data 는 object를 포함 | body는 문자열화 되어있다 |
| status가 200이고 statusText가 'OK' 이면 성공 | 응답객체가 OK 속성을 포함하면 성공 |
| 자동으로 JSON 데이터 형식으로 변환 | .json() 메서드를 사용해야함 |
| 요청을 취소할 수 있고 타임아웃을 걸 수 있다 | 해당 기능 존재 X |
| HTTP 요청을 가로챌수 있음 | 기본적으로 제공 X |
| download진행에 대해 기본적인 지원을 함 | 지원 X |
| 좀 더 많은 브라우저에 지원됨 | Chrome 42+, Firefox 39+ ... 에 지원 |
✅ axios는 별도의 설치가 필요하지만, 이 것을 커버할만한 fetch보다 많은 기능 지원과 문법이 조금이나마 간소화된다는 장점이 있음.
axios 요청(req) 파라미터
- method : 요청방식
- url : 서버 주소
- headers : 요청 헤더
- data : 요청 방식이 'put', 'post', 'patch' 에 해당하는 경우 body에 보내는 데이터
- params : URL 파라미터
👀 출처
https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9