티스토리 뷰

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);

관련 글

저작자표시 비영리 동일조건
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
글 보관함