728x90
반응형
Axios(액시오스)
Vue에서 권고하는 HTTP 통신 라이브러리로 Promise기반으로 구성되어 있으며 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘 되어있고 API도 다양하다.
참고
Axios 실습
axios변수를 사용해서 HTTP GET 요청을 하는 코드 작성해보기
// axios.html
<!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/') // Sample user 가져오는 url
.then(function(response) {
console.log(response.data);
vm.users = response.data;
})
.catch(function(error) {
console.log(error);
});
}
}
})
</script>
</body>
</html>뷰 인스턴스를 vm변수로 받아 사용한 이유는 뷰 인스턴스에서의 this와 axios의 this가 다르기 때문에 vm변수에 담아 axios내부에서 접근, 사용할 수 있다.
동작 확인
참고
웹 서비스에서의 클라이언트와 서버와의 HTTP 통신 구조
참고
728x90
반응형
'Dev > Vue.js' 카테고리의 다른 글
| [Vue.js] 템플릿 문법 - 실전 (0) | 2020.09.08 |
|---|---|
| [Vue.js] 템플릿 문법 - 기본 (0) | 2020.09.08 |
| [Vue.js] 라우터 (0) | 2020.09.08 |
| [Vue.js] 컴포넌트 통신 방법 - 응용 (0) | 2020.09.08 |
| [Vue.js] 컴포넌트 통신 방식 - 기본 (0) | 2020.09.07 |
댓글