Vue.js使用-http請求

Vue.js使用-ajax使用
1.為什么要使用ajax
前面的例子，使用的是本地模擬數據，通過ajax請求服務器數據。

2.使用jquery的ajax庫示例

new Vue({
    el: '#app',
    data: {
        searchQuery: '',
        columns: [{name: 'name', iskey: true}, {name: 'age'},{name: 'sex', dataSource:['Male', 'Female']}],
        peoples: []
    },
    ready: function () {
        this.getPeoples();
    },
    methods: {
        getPeoples: function () {
            var vm = this;
            $.ajax({
                url: 'http://localhost:20000/my_test',
                type: 'get',
                dataType: 'json',
                success: function (data) {
                    vm.$set('peoples', data.result);
                },
                error: function(xhr, errorType, error) {
                    alert('Ajax request error, errorType: ' + errorType +  ', error: ' + error)
                }
            });
        }
    }
})

3.vue-resource庫
vue是基於數據驅動的，不需要直接操作DOM，因此沒有必要引入jquery
vue提供了一款輕量的http請求庫，vue-resource
vue-resource除了提供http請求外，還提供了inteceptor攔截器功能，在訪問前，訪問后，做處理。

4.vue-resource語法-使用$http對象

// 基於全局Vue對象使用http
Vue.http.get('/someUrl',[options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl',[body],[options]).then(successCallback, errorCallback);
// 在一個Vue實例內使用$http
this.$http.get('/someUrl',[options]).then(sucessCallback, errorCallback);
this.$http.post('/someUrl',[body],[options]).then(successCallback, errorCallback);

then方法的回調函數寫法有兩種，第一種是傳統的函數寫法，第二種是更簡潔的Lambda表達式寫法。

//傳統寫法
this.$http.get('/someUrl',[options]).then(function(response){
	//響應成功回調
},function(response){
	//響應錯誤回調
});

//Lambda寫法
this.$http.get('someUrl',[options]).then((response)=>{
	//響應成功回調
},(response)=>{
	//響應錯誤回調
});

5.vue-resource示例

<script src="js/vue-resource.js"></script>
<script>
new Vue({
        el: '#app',
        data: {
            searchQuery: '',
            columns: [{name: 'name', iskey: true}, {name: 'age'},{name: 'sex', dataSource:['Male', 'Female']}],
            peoples: []
        },
        ready: function () {
            this.getPeoples();
        },
        methods: {
            getPeoples: function () {
                var vm = this;
                vm.$http.get('http://localhost:20000/my_test').then(
                        function (data) {
                            var newdata = JSON.parse(data.body)
                            vm.$set('peoples', newdata.result)
                        }).catch(function (response) {
                            console.log(response)
                        })
            }
        }
    })
</script>

6.vue-resource用法-使用$resource對象
除了使用$http對象訪問http，還可以使用$resource對象來訪問。
resource服務默認提供以下幾種action:
get:{method: 'GET'},
save:{method: 'POST'},
query:{method: 'GET'},
update:{method: 'PUT'},
remove:{method: 'DELETE'},
delete:{method: 'DELETE'},

resource對象使用示例如下：

new Vue({
        el: '#app',
        data: {
            searchQuery: '',
            columns: [{name: 'name', iskey: true}, {name: 'age'},{name: 'sex', dataSource:['Male', 'Female']}],
            peoples: []
        },
        ready: function () {
            this.getPeoples();
        },
        methods: {
            getPeoples: function () {
                var vm = this;
                var resource = this.$resource('http://localhost:20000/my_test')

                resource.get().then(
                        function (data) {
                            var newdata = JSON.parse(data.body)
                            vm.$set('peoples', newdata.result)
                        }).catch(function (response) {
                            console.log(response)
                        })
            }
        }
    })

7.攔截器interceptor
語法如下：

Vue.http.interceptors.push(function(request, next){
	//...
	//請求發送前的處理邏輯
	//...
	next(function(response){
		//...
		//請求發送后的處理邏輯
		//...
		//根據請求的狀態，response參數會返回給successCallback或errorCallback
		return response
	})

})

8.攔截器interceptor使用示例

<div id="help">
        <loading v-show="showLoading"></loading>
    </div>
<template id="loading-template">
			<div class="loading-overlay">
				<div class="sk-three-bounce">
					<div class="sk-child sk-bounce1"></div>
					<div class="sk-child sk-bounce2"></div>
					<div class="sk-child sk-bounce3"></div>
				</div>
			</div>
    </template>
<script>
var help = new Vue({
        el: '#help',
        data: {
            showLoading: false
        },
        components: {
            'loading': {
                template: '#loading-template'
            }
        }
    })

    Vue.http.interceptors.push(function(request, next){
        help.showLoading = true
        next(function (response) {
            help.showLoading = false
            return response
        })
    })
</script>

9.vue-resource的優點
vue-resource比jquery輕量，可以使用Vue.http或者Vue.resource處理HTTP請求，兩者沒有什么區別。
另外可以是用interceptor在請求前和請求后附加一些行為。