vue-resource学习笔记

一、安装vue-resource

　　1.项目内运行：npm i vue-resource --save

　　2.import VueResource from 'vue-resource'

　　3.Vue.use(VueResource)

二、vue-resource特定

　　1.vue-resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQuery的体积要小得多。

　　2.支持主流的浏览器，和Vue.js一样，vue-resource除了不支持IE 9以下的浏览器，其他主流的浏览器都支持。

　　3.支持Promise API和URI Templates（还未了解）

　　　　Promise是ES6的特性，Promise的中文含义为“先知”，Promise对象用于异步计算。

　　　　URI Templates表示URI模板，有些类似于ASP.NET MVC的路由模板。

　　4. 支持拦截器（还未了解）

三、基本语法

　　// 基于全局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);

 

　　在发送请求后，使用then方法来处理响应结果，then方法有两个参数，第一个参数是响应成功时的回调函数，第二个参数是响应失败时的回调函数。

　　then方法的回调函数也有两种写法，第一种是传统的函数写法，第二种是更为简洁的ES 6的Lambda写法：

　　// 传统写法

　　this.$http.get('/someUrl', [options]).then(function(response){

  　　// 响应成功回调

　　}, function(response){

  　　// 响应错误回调

　　});

 　　// Lambda写法

　　this.$http.get('/someUrl', [options]).then((response) => {

  　　// 响应成功回调

　　}, (response) => {

  　　// 响应错误回调

　　});

　　支持的HTTP方法

　　vue-resource的请求API是按照REST风格设计的，它提供了7种请求API：　

• 　　get(url, [options])
• 　　head(url, [options])
• 　　delete(url, [options])
• 　　jsonp(url, [options])
• 　　post(url, [body], [options])
• 　　put(url, [body], [options])
• 　　patch(url, [body], [options])

　　除了jsonp以外，另外6种的API名称是标准的HTTP方法。当服务端使用REST API时，客户端的编码风格和服务端的编码风格近乎一致，这可以减少前端和后端开发人员的沟通成本。

　　options对象

　　发送请求时的options选项对象包含以下属性：

参数	类型	描述
url	string	请求的URL
method	string	请求的HTTP方法，例如：'GET', 'POST'或其他HTTP方法
body	Object, FormDatastring	request body
params	Object	请求的URL参数对象
headers	Object	request header
timeout	number	单位为毫秒的请求超时时间 (0 表示无超时时间)
before	function(request)	请求发送前的处理函数，类似于jQuery的beforeSend函数
progress	function(event)	ProgressEvent回调处理函数
credentials	boolean	表示跨域请求时是否需要使用凭证
emulateHTTP	boolean	发送PUT, PATCH, DELETE请求时以HTTP POST的方式发送，并设置请求头的X-HTTP-Method-Override
emulateJSON	boolean	将request body以application/x-www-form-urlencoded content type发送

 

　　emulateHTTP的作用

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

　　Vue.http.options.emulateHTTP = true;

 

　　emulateJSON的作用

　　如果Web服务器无法处理编码为application/json的请求，你可以启用emulateJSON选项。启用该选项后，请求会以application/x-www-form-urlencoded作为MIME type，就像普通的HTML表单一样。

　　Vue.http.options.emulateJSON = true;

　　response对象

　　response对象包含以下属性：

 

方法	类型	描述
text()	string	以string形式返回response body
json()	Object	以JSON对象形式返回response body
blob()	Blob	以二进制形式返回response body
属性	类型	描述
ok	boolean	响应的HTTP状态码在200~299之间时，该属性为true
status	number	响应的HTTP状态码
statusText	string	响应的状态文本
headers	Object	响应头

 

　　注意：本文的vue-resource版本为v0.9.3，如果你使用的是v0.9.0以前的版本，response对象是没有json(), blob(), text()这些方法的。

四、示例

　　1.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)

        　　　　　})

    　　　　　　}

  　　　　　}

　　　　})

　　2.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

    　　　　}

  　　　　}

　　　　})

　　3.PUT请求

　　　　updateCustomer: function() {

  　　　　var vm = this

  　　　　vm.$http.put(this.apiUrl + '/' + vm.item.customerId, vm.item)

    　　　　.then((response) => {

      　　　　vm.getCustomers()

    　　　　})

　　　　}

　　4.delete请求

　　　　deleteCustomer: function(customer){

  　　　　　　var vm = this

  　　　　　　vm.$http.delete(this.apiUrl + '/' + customer.customerId).then((response) => {

      　　　　　　vm.getCustomers()

    　　　　　})

　　　　　}

 

原文链接：http://www.cnblogs.com/keepfool/p/5657065.html