[Vue] Axios(엑시오스)란?

[Vue] Axios(엑시오스)란?

• Vue에서 권고하는 HTTP 통신 라이브러리는 엑시오스
• Promise 기반의 HTTP 통신 라이브러리이며, 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘 되어 있고 API가 다양함

엑시오스 설치

프로제그 엑시오스를 설치하는 방법은 CDN방식과 NPM방식 2가지가 있음

• CDN 방식

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

• NPM 방식

npm install axios

Axios사용 방법

• 라이브러리를 설치하고 나면 axios라는 변수에 접근할 수 있게 됨
• axios변수를 이용해서 아래와 같이 HTTP GET 요청을 날리는 코드를 작성

<div id="app">
  <button v-on:click="fetchData">get data</button>
</div>

new Vue({
  el: '#app',
  methods: {
    fetchData: function() {
      axios.get('https://jsonplaceholder.typicode.com/users/')
        .then(function(response) {
          console.log(response);
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
})

• 위 코드는 get data 버튼을 클릭했을 때 사용자 정보를 받아오는 코드
• 실행하면 사용자 정보가 브라우저 개발자 도구의 콘솔에 출력됨

만약 API에서 GET으로 URL을 가져오면 Axios도 GET메서드를 활용하면 된다

기타 엑시오스 참고

 출처

• https://github.com/axios/axios#example