1. HTTP 통신
HTTP 통신을 통해 사용자 상호작용에 따라 화면의 변화를 줄 수 있다.
대표적으로 jQuery의 ajax가 있다.
2. Vue에서의 HTTP 통신
HTTP 통신 도구로 뷰 리소스와 액시오스가 있으며, 액시오스를 주로 사용한다.
A. 액시오스
액시오스는 Promise 객체 기반의 API를 지원한다. Promise 객체는 비동기 방식으로 로직을 수행하는 자바스크립트 객체이다.
액시오스는 response data가 객체 형태로 리턴되어 별도의 parsing 처리가 필요 없다.
[액시오스의 API 형식]
| API | Description |
| axios.get('...url...') .then() .catch(); |
get 요청을 실행한다. 정상 수신 시 then()을 실행하고, 오류 발생 시 catch()를 실행한다. |
| axios.post('...url...') .then() .catch(); |
post 요청을 실행한다. 정상 수신 시 then()을 실행하고, 오류 발생 시 catch()를 실행한다. |
| axios({ method: 'get', url: '...url...' ... }); |
HTTP 요청의 세부 내용을 직접 정의하여 보내는 방식 |
[샘플 코드]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Http Request/Response</title>
</head>
<body>
<div id="vue-resource">
<button v-on:click="getData">목록 가져오기(뷰 리소스)</button>
</div>
<div id="vue-axios">
<button v-on:click="getData">목록 가져오기(액시오스)</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.4"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var vueResource = new Vue({
methods: {
getData: function() {
this.$http.get('https://raw.githubusercontent.com/joshua1988/doit-vuejs/master/data/demo.json')
.then(function(response) {
console.log('vue-resource >>>>>')
console.log(response);
console.log(JSON.parse(response.data))
})
}
}
}).$mount('#vue-resource');
var vueAxios = new Vue({
methods: {
getData: function() {
axios.get('https://raw.githubusercontent.com/joshua1988/doit-vuejs/master/data/demo.json')
.then(function(response) {
console.log('vue-axios >>>>>')
console.log(response);
})
}
}
}).$mount('#vue-axios');
</script>
</body>
</html>
'Frontend' 카테고리의 다른 글
| Vue.js (8) 뷰 프로젝트 (0) | 2020.04.25 |
|---|---|
| Vue.js (7) 뷰 템플릿 (0) | 2020.04.24 |
| Vue.js (5) 라우터 (0) | 2020.04.21 |
| Vue.js (4) 컴포넌트 간 통신 (0) | 2020.04.11 |
| Vue.js (3) 인스턴스와 컴포넌트 (0) | 2020.04.11 |
