< 아래 내용들은 인프런 - vue.js 시작하기 - Age of Vue.js 강의를 듣고 정리한 내용입니다.>
axios
-> 뷰에서 권고하는 promise기반의 http 통신 라이브러리
ajax (Asynchronous Javascript And Xml)
-> 비동기적인 webApplication의 제작을 위한 웹개발 기법
vue에서 http통신을 하기위해서는 axios를 주로 사용하도록
권고하고 있습니다.
axios는 오픈소스로
https://github.com/axios/axios
GitHub - axios/axios: Promise based HTTP client for the browser and node.js
Promise based HTTP client for the browser and node.js - axios/axios
github.com
이 깃허브 주소에서 확인하실수있습니다.
깃헙 설명에는 CDN방식으로 axios를 사용할수있도록 script 구문이 적혀있습니다.
<script src="https://unpkg.com/axios@1.6.7/dist/axios.min.js"></script>
해당 코드를 복붙하여 body태그 내부에 넣으면 됩니다 !
axios 통신
<1. 전체 코드>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button v-on:click="getData">getUser</button>
<div>
{{ users }}
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios@1.6.7/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;
}).catch(function(err) {
console.log(error);
});
}
}
})
</script>
</body>
</html>
->
axios.get ()
: 파라미터로 들어간 url에서 데이터를 get (받아온다.)
성공하면 then()으로
실패하면 catch()의 구문을 실행합니다.
<2. div 태그 소개 >
<div id="app">
<button v-on:click="getData">getUser</button>
<div>
{{ users }}
</div>
</div>-> id가 app인 div태그 안에 button을 만들어줍니다.
v-on을 이용해 해당 button이 클릭될 때 getData라는 함수를 실행하도록 합니다.
button에는 getUser라는 글자가 적혀있구요.
-> {{}}를 이용하면 그래도 출력할수가있습니다.
users를 그대로 출력할수있습니다.
live server로 실행을 시키면 이렇게 뜹니다.
<3. CDN 태그 >
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios@1.6.7/dist/axios.min.js"></script>
위에 있는 script태그는 vue.js의 라이브러리 태그 입니다.
두번째 줄에 있는 태그는 axios를 사용할수있게 해주는 태그입니다.
<4. axios 코드를 포함한 Vue 생성자 코드 >
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;
}).catch(function(err) {
console.log(error);
});
}
}
})
-> el 속성을 통해 id가 app인 요소를 가진다는 것을 표현
getData라는 함수를 정의했다.
'https://jsonplaceholder.typicode.com/users/'
-> users 데이터를 json 형태로 제공해 주는 곳
axios를 이용해 해당 url에서 데이터를 받아온다.
그러면 vm.users = response.data를 통해 this의 data인 users에 저장이 된다.
div태그에 {{users}}를 해놓았으므로 화면에서 보여진다.
-> getUser를 누를 때 화면에 데이터가 보여진다.
! 요약하자면 !
1. v-on:click="getData"는 해당 버튼을 누르면 getData()라는 함수를 실행하도록 한다.
2. methods에 있는 getData()함수가 실행된다.
3. getData()는 axios를 통해 Url에서 데이터를 get해온다.
4. 성공하면 .then, 실패하면 .catch에 있는 구문이 실행된다.
5. .then구문에는 vm.users에 데이터를 넣는 구문이 있다.
6. {{ users }} 를 통해 해당 데이터들이 출력된다.