Vue.jsvue-resource全攻略 - keepfool(2)_H5之家 - 中国HTML5教程资源分享第一站

提示：以下示例仍然沿用上一篇的组件和WebAPI，组件的代码和页面HTML代码我就不再贴出来了。

GET请求var demo = new Vue({ el: '#app', data: { gridColumns: ['customerId', 'companyName', 'contactName', 'phone'], gridData: [], apiUrl: 'http://211.149.193.19:8080/api/customers' }, ready: function() { this.getCustomers() }, methods: { getCustomers: function() { this.$http.get(this.apiUrl) .then((response) => { this.$set('gridData', response.data) }) .catch(function(response) { console.log(response) }) } } })

这段程序的then方法只提供了successCallback，而省略了errorCallback。
catch方法用于捕捉程序的异常，catch方法和errorCallback是不同的，errorCallback只在响应失败时调用，而catch则是在整个请求到响应过程中，只要程序出错了就会被调用。

在then方法的回调函数内，你也可以直接使用this，this仍然是指向Vue实例的：
getCustomers: function() { this.$http.get(this.apiUrl) .then((response) => { this.$set('gridData', response.data) }) .catch(function(response) { console.log(response) }) }

为了减少作用域链的搜索，建议使用一个局部变量来接收this。

View Demo

JSONP请求getCustomers: function() { this.$http.jsonp(this.apiUrl).then(function(response){ this.$set('gridData', response.data) }) }

View Demo

POST请求var demo = new Vue({ el: '#app', data: { show: false, gridColumns: [{ name: 'customerId', isKey: true }, { name: 'companyName' }, { name: 'contactName' }, { name: 'phone' }], gridData: [], apiUrl: 'http://211.149.193.19:8080/api/customers', item: {} }, ready: function() { this.getCustomers() }, methods: { closeDialog: function() { this.show = false }, getCustomers: function() { var vm = this vm.$http.get(vm.apiUrl) .then((response) => { vm.$set('gridData', response.data) }) }, createCustomer: function() { var vm = this vm.$http.post(vm.apiUrl, vm.item) .then((response) => { vm.$set('item', {}) vm.getCustomers() }) this.show = false } } })

View Demo

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

View Demo

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

View Demo

使用resource服务

vue-resource提供了另外一种方式访问HTTP——resource服务，resource服务包含以下几种默认的action：

get: {method: 'GET'}, save: {method: 'POST'}, query: {method: 'GET'}, update: {method: 'PUT'}, remove: {method: 'DELETE'}, delete: {method: 'DELETE'}

resource对象也有两种访问方式：

全局访问：Vue.resource

实例访问：this.$resource

resource可以结合URI Template一起使用，以下示例的apiUrl都设置为{/id}了：

apiUrl: 'http://211.149.193.19:8080/api/customers{/id}' GET请求

使用get方法发送GET请求，下面这个请求没有指定{/id}。

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

View Demo

POST请求

使用save方法发送POST请求，下面这个请求没有指定{/id}。

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

View Demo

PUT请求

使用update方法发送PUT请求，下面这个请求指定了{/id}。

updateCustomer: function() { var resource = this.$resource(this.apiUrl) vm = this resource.update({ id: vm.item.customerId}, vm.item) .then((response) => { vm.getCustomers() }) }

{/id}相当于一个占位符，当传入实际的参数时该占位符会被替换。
例如，{ id: vm.item.customerId}中的vm.item.customerId为12，那么发送的请求URL为：

:8080/api/customers/12

View Demo

DELETE请求