Vue使用过程中，最重要的操作离不开数据操作，即http请求中常用的包括增、删、改、查等操作。
Vue进行http请求操作有两种方式，引入vue-resource 或者 axios。

接下来主要对vue-resource做介绍。

vue-resource的安装

npm install vue-resource --save-dev

安装后需要引入和使用：

import VueResource form 'vue-resource'
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。

4. 支持拦截器。

vue-resource的使用

全局使用

// 基于全局Vue对象使用http
Vue.http.get('url', [options]).then(successCallback, errorCallback);

Vue.http.post('url', [body], [options]).then(successCallback, errorCallback);

局部使用

常用于$http直接在methods或者created中定义。

// 基于局部Vue文件使用http
this.$http.get('url', [options]).then(successCallback, errorCallback);

this.$http.post('url', [body], [options]).then(successCallback, errorCallback);

说明：

• 发送 http请求后，通过then方法相应处理结果并进行接收返回结果。
• then方法返回的结果有两个参数：一个是响应成功的回调方法，另一个是响应失败的回调。

then方法的书写形式有以下几种：

//一般模式
this.$http.get('url', [options]).then(function(response) {
  console.log("请求响应成功！")
}, function(error) {
  console.log("请求响应失败！")
});

//ES6模式
this.$http.get('url', [options]).then((response) => {
  console.log("请求响应成功！")
}, (error) => {
  console.log("请求响应失败！")
});

还可以使用catch方法来响应和捕捉请求失败的异常：

//catch模式
this.$http.get('url', [options]).then((response) => {
  console.log("请求响应成功！")
}).catch((error) => {
  console.log("请求响应失败！")
});

代码的error并不是包含在then方法中，而是在和then方法并列的catch方法里。

catch方法和then方法中errorCallback是不同的，then方法只在响应失败时调用，而catch方法是在整个请求到响应过程中，只要程序出错了就会被调用。

vue-resource支持的HTTP方法

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

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

options对象

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

response对象

response对象包含以下属性：

get请求

this.$http.get('url', { params: { param1: 1, param2: 2 }})
  .then((response) => {
    console.log(response.body) //成功后返回数据
  }, (error) => {
    console.log(error) //失败返回错误信息
  })

说明：

• url：必须。可以是绝对地址，也可以是设置代理后的地址；
• params：非必须，需要向后台传的参数，没有则不填。

参考文档

• Vue_VueResource
• vue-resource插件使用