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对象使用httpVue.http.get('/someUrl', [options]).then(successCallback, errorCallback);Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);// 在一个Vue实例内使用$httpthis.$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    })})

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