Vue.js에서 Axios 사용하기

입문자를 위한 Vue.js + Axios 튜토리얼

Axios는 HTTP 통신과 AJAX 요청을 다루는 라이브러리입니다. 비슷한 역할을 하는 vue-resource도 있지만, 업데이트 주기가 느리고 커뮤니티가 작아서 요즘은 잘 쓰지 않는 편이라고 합니다.

Axios 설치

다음 명령으로 Axios를 설치합니다.

npm install --save axios

그리고 main.js에 메소드를 추가해 Axios를 전역에서 사용할 수 있도록 합니다.

Axios 사용

JSONPlaceholder라는 서비스를 사용해 방금 설치한 Axios를 테스트해 보겠습니다. 아래 코드를 복사·붙여넣기 해보세요.

Internet Explorer

IE는 Promise를 지원하지 않으므로 es6-promise 폴리필이 필요할 수 있습니다. 다음 명령으로 설치합니다.

npm install --save es6-promise

그리고 webpack 설정 파일에 아래 한 줄을 추가합니다.

마치며

Vue.js + Axios에 대한 짧은 튜토리얼이 도움이 되었기를 바랍니다. 연락은 LinkedIn이나 ghsspower@gmail.com으로 부탁드립니다. 감사합니다!