SW 개발/JavaScript
Vue.js, AJAX 요청하기
지단로보트
2016. 8. 20. 04:48
개요
Vue.js는 최근 가장 핫한 MVVM 기반의 JavaScript 프론트엔드 라이브러리이다. Vue.js를 사용하면 jQuery보다 간결하고 직관적인 소스 코드를 작성할 수 있다. 달리 말하면 jQuery를 완전히 배제하고 프론트엔드 소스 코드를 작성할 수 있다. 하지만 AJAX 요청시 jQuery.ajax()를 포기하기에는 너무 매력적인 기능이다. vue-resource는 XMLHttpRequest 오브젝트를 이용한 AJAX 요청을 도와주는 Vue.js의 플러그인 라이브러리이다. 이번 글에서는 TypeScript 환경에서 vue-resource의 사용 예를 간단히 설명하고자 한다.
HTML
<body>
<script src="https://cdn.jsdelivr.net/vue/2.0.0-rc.2/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/vue.resource/0.9.3/vue-resource.min.js"></script>
</body>
TypeScript Definition 설치
TypeScript 환경이라면 프로젝트 루트 폴더에서 아래와 같이 실행하여 TypeScript Definition을 설치한다.
$ typings install dt~vue --global
$ typings install dt~vue-resource --global
AJAX 요청하기
function onSuccess(response: vuejs.HttpResponse) {
// 요청 성공시 콜백 함수 작성
}
function onError(response: vuejs.HttpResponse) {
// 요청 실패시 콜백 함수 작성
}
// AJAX GET 요청을 위한 HttpOptions 오브젝트 작성
let getOptions: vuejs.HttpOptions = {
headers: {
"X-Some-Header": 123,
"X-Another-Header": "Hi"
},
params: {
"pageNo": 1,
"pageSize": 20
}
}
// AJAX GET 요청 수행
Vue
.http
.get("http://somedomain.com/getSomething", getOptions)
.then(onSuccess, onError);
// AJAX POST 요청을 위한 HttpOptions 오브젝트 작성
let postOptions: vuejs.HttpOptions = {
headers: {
"X-Some-Header": 123,
"X-Another-Header": "Hi"
},
body: {
firstName: "JSON",
lastName: "Object"
}
}
// AJAX POST 요청 수행
Vue
.http
.post("http://localhost:8080/babo", postOptions)
.then(onSuccess, onError);