Vue.js 学习要点总结(二)

vue-resource实现跨域访问

vue-resource简介

简介: vue-resource是Vue.js的一款插件, 可以通过XMLHttpRequest或JSONP发起请求并处理响应, 可以实现与$.ajax统一的功能.
特点:
1. 体积小
2. 支持各种主流浏览器(IE9以下不支持)
3. 支持ES6的promise API和URL Templates
4. 支持拦截器

vue-resource使用

引入vue-reource

<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>

基本语法:

// 基于全局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(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

在引入vue-resource后,可以有两种方式使用http, 基于全局的Vue对象使用http, 基于某个Vue实例使用$http. 发送请求后的then()方法有两个参数, 第一个响应成功时的回调函数,第二个时响应失败时的回调函数.

常用的http方法:

• this.http.get(url, [options])/this.$http.get(url, [options])
• this.http.head(url, [options])/this.$http.head(url, [options])
• this.http.delete(url, [options])/this.$http.delete(url, [options])
• this.http.post(url, [body], [options])/this.$http.post(url, [body], [options]
• this.http.put(url, [body], [options])/this.$http.put(url, [body], [options])
• this.http.patch(url, [body], [options])/this.$http.patch(url, [body], [options])

option对象介绍

发送请求时的option对象包含属性如下:

参数	类型	描述
url	String	请求的url
method	String	请求的HTTP方法,例如:’get’, ‘post’等
body	Object, FormData string	Request body
params	Object	请求的URL参数对象
headers	Object	Request header
Time out	number	请求超时时间
before	function(request)	请求发送前处理的函数,类似jQuery的beforeSend函数
progress	function(event)	ProgressEvent回调函数
credential	boolean	跨域请求是否需要凭证
emulateHTTP	boolean	发送put, patch, delete请求时以http post方式发送,并设置请求头的X-HTTP-method-Override

emulateHTTP作用: 若Web服务器无法处理PUT, PATCH和DELETE这种REST风格的请求, 你可以启用enulateHTTP现象。启用该选项后, 请求会以普通的POST方法发出, 并且HTTP头信息的X-HTTP-Method-Override属性会设置为实际的HTTP方法.

response对象介绍

服务器响应的response对象包含属性如下:

属性	类型	描述
ok	boolean	响应的HTTP状态码在200-299间时,为true
status	number	响应的HTTP码
statusTest	String	响应的状态文本
header	Object	响应头
方法	类型	描述
text()	string	以string形式返回的response body
json()	Object	以JSON形式返回的response body
blob()	Blob	以二进制形式返回的response body

####举例
get请求:

getCustomers: function() {
            this.$http.get(this.apiUrl)
                .then((response) => {
                    this.$set('gridData', response.data)
                })
                .catch(function(response) {
                    console.log(response)
                })
        }
    }

post请求:

 createCustomer: function() {
            var vm = this
            vm.$http.post(vm.apiUrl, vm.item)
                .then((response) => {
                    vm.$set('item', {})
                    vm.getCustomers()
                })
            this.show = false
        }
    }

put请求

updateCustomer: function() {
    var vm = this
    vm.$http.put(this.apiUrl + '/' + vm.item.customerId, vm.item)
        .then((response) => {
            vm.getCustomers()
        })
}

delete请求

deleteCustomer: function(customer){
    var vm = this
    vm.$http.delete(this.apiUrl + '/' + customer.customerId)
        .then((response) => {
            vm.getCustomers()
        })
}

拦截器

拦截器实现在发送请求前后发送请求后进行一些处理
基本用法:

Vue.http.interceptors.push((request, next) => {
        // ...
        // 请求发送前的处理逻辑
        // ...
    next((response) => {
        // ...
        // 请求发送后的处理逻辑
        // ...
        // 根据请求的状态，response参数会返回给successCallback或errorCallback
        return response
    })
})

项目实际编码时的一些体会