Vue HTTP 통신
웹 앱을 이용하는데 HTTP 통신은 필수로 구현해야 하는 기능입니다.
대표적으로 jQuery, ajax가 있습니다.
뷰에서도 ajax를 지원하기 위한 라이브러리를 제공합니다.
필수 라이브러리로 뷰 리소스와 최근 많이 이용하는 axios가 있습니다.
뷰 리소스
CDN을 이용해서 라이브러리를 로딩하는 방식과 NPM으로 라이브러리를 설치하는 방법이 있습니다.
CDN 설치 방법을 이용하여 특정 데이터를 받아와 로그를 출력해보겠습니다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name ="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Sample</title>
</head>
<body>
<div id="app">
<button v-on:click="getdata">Data</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="http://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
<script>
new Vue({
el: '#app',
methods: {
getdata: function() {
this.$http.get('https://raw.githubusercontent.com/joshua1988/doit-vuejs/master/data/demo.json')
.then(function(response) {
console.log(response);
console.log(JSON.parse(response.data));
});
}
}
});
</script>
</body>
</html>
버튼을 클릭 시 지정한 URL의 데이터를 가져옵니다.
불러오는 데이터는 JSON 형식의 간단한 파일로 가져옵니다.
뷰 리소스 라이브러리를 이용 시, 서버로부터 데이터를 받아와 화면에 나타낼 수 있습니다.
Axios
현재 뷰 커뮤니티에서 가장 많이 사용되는 HTTP 통신 라이브러리입니다.
Promise 기반의 API 형식이 다양하게 제공되어 별도의 로직을 구현할 필요 없이 주어진 API만으로 간편하게 로직을 구현할 수 있습니다.
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
위 코드를 HTML 파일에 추가하면 사용할 수 있게 됩니다.
간단하게 API 형식을 살펴봅시다.
|
axios.get('URL 주소').then().catch() |
해당 URL 주소에 대해 HTTP GET 요청을 보냅니다. 서버에서 보낸 데이터를 정상적으로 받아오면 then() 안에 정의한 로직이 실행되고, 데이터를 받아올 때 오류 발생 시 catch()에 정의한 로직이 수행됩니다. |
|
axios.post('URL 주소').then().catch() |
해당 URL 주소에 대해 HTTP POST 요청을 보냅니다. then()과 catch()함수는 위의 get과 같습니다. |
|
axios({ 옵션 속성 }) |
HTTP 요청에 대한 자세한 속성들을 직접 정의하여 보낼 수 있습니다. |
위의 사용 방법 중 get 요청을 하는 API로 간단히 데이터를 요청해서 받아와 console에 출력해보겠습니다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name ="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Sample</title>
</head>
<body>
<div id="app">
<button v-on:click="getdata">Data</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="http://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
<script>
new Vue({
el: '#app',
methods: {
getdata: function() {
axios.get('https://raw.githubusercontent.com/joshua1988/doit-vuejs/master/data/demo.json')
.then(function(response) {
console.log(response);
});
}
}
});
</script>
</body>
</html>
response 객체를 보면 데이터 속성이 객체 형태이기 때문에 별도로 JSON.parse()를 사용할 필요가 없습니다.
해당 부분이 뷰 리소스보다 사용성이 좋은 장점이 있습니다.