액시오스 (Axios)는 현재 뷰 커뮤니티에서 가장 많이 사용되는
HTTP통신 라이브러리다. 에반도 뷰 리소스 라이브러리를 통해
공식 라이브러리에서 제외하면서 액시오스를 언급했다고한다.
액시오스는 깃허브 리포지토리의 별이 3만개가 넘는다. 이는
뷰 리소스의 8천개에 비해 압도적으로 많다. 그만큼 많은 개발자들이
관심을 갖고 이용하고 있다는 증거이다. 일반적으로 오픈소스 라이브러리의
장래성은 깃허브 리포지토리가 얼마나 활성화되어 있느냐로
판단할 수 있는데, 액시오스가 그런면에서 뷰 리소스 보다 더 안정적으로
지원되는 라이브러리 라고 할 수 있다.
또한 액시오스는 Promise 기반의 API형식이 다양하게 제공되어
별도의 로직을 구현할 필요 없이 주어진 API만으로도
간편하게 원하는 로직을 구현할 수 있다.
간단하게 액시오스를 사용해보자.
먼저 액시오스를 사용하려면 설치를 해야한다.
액시오스 설치와 사용법은 뷰 리소스와 동일하다.
CDN과 NPM을 이용해 설치할 수 있다.
여기선 CDN을 사용하자.
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
위 코드 한 줄로 라이브러리를 로딩하여 사용할 수 있다.
액시오스는 뷰 리소스 처럼 HTTP통신에 대해 간단하고
직관적인 API를 제공한다. 그리고 API형식이
다양하여 단순한 호출 이외에도 여러 설정 값을 추가하여
함께 호출할 수 있다.
//HTTP GET 요청
axios.get('URL 주소').then().catch();
//HTTP POST 요청
axios.post('URL 주소').then().catch();
다음 액시오스를 사용한 소스코드를 보자.
위 소스를 실행해 개발자도구에 콘솔창을 보면
이전 포스팅에서 본 뷰 리소스와 처럼 아래와 같은
콘솔창을 볼 수 있다.
response 객체를 보면 data속성이 일반 문자열 형식이 아니라
객체 형태이기 때문에 별도로 JSON.parse()를 이용해
파싱을 해줄 필요가 없다. 이런 부분이 액시오스가 리소스 보다
사용성이 좋다는 것을 증명한다.
<참고> Do it! 예제로 이해하고 실전 프로젝트로 완성하다! Vue.js 입문(장기효)