본문 바로가기
Front-End/Vue

[장기효(캡틴판교) - Vue.js 시작하기] 6. axios

by hongdor 2021. 1. 24.

출처 : 인프런의 장기효(캡틴판교)님의 강좌 / Vue.js 시작하기 - Age of Vue.js

 

 

6. axios

 

 - javascript의 ajax같은 비동기 통신을 위한 라이브러리다. 

   github에서 확인가능하며 뷰에서 공식적으로 권장하는 오픈 소스이다.

   아래는 예제이다.

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Axios</title>
</head>
<body>
  <div id="app">
    <button v-on:click="getData">get user</button>
    <div>
      {{ users }}
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        users: []
      },
      methods: {
        getData: function() { 
          var vm = this;
          axios.get('https://jsonplaceholder.typicode.com/users/')
            .then(function(response) { //성공
              console.log(response.data);
              vm.users = response.data; // vm 대신 this를 쓰면 axios를 바라보게된다.
            })
            .catch(function(error) {
              console.log(error);
            });
        }
      }
    })
  </script>
</body>
</html>

 

 

댓글0