Vue.js使用-http请求 - 迪米特

Z时代
2024-01-10
分类：综合

vue

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>