这两天学习了vue-resource插件个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。
Vue可以构建一个完全不依赖后端服务的应用，同时也可以与服务端进行数据交互来同步界面的动态更新。
Vue通过插件的形式实现了基于AJAX，JSPNP等技术的服务端通信。
vue-resource是一个通过XMLHttpRequrest或JSONP技术实现异步加载服务端数据的Vue插件
提供了一般的 HTTP请求接口和RESTful架构请求接口，并且提供了全局方法和VUe组件实例方法。
使用的版本是：vue-resource 0.7.2
配置
参数配置
分为：
全局配置
组件实例配置
调用配置
这三部分的优先级依次增高，游戏机高的配置会覆盖优先级低的配置。
全局配置
Vue.http.options.root = '/root';
全局配置option属性
组件实例配置
在实例化组件时可以传入http选项来进行配置
new Vue({ http: { root: '/root', headers: { Authorization: '' } } })
方法调用时配置
在调用vue-resource请求方法是传入选项对象。
new Vue({ ready: function() { // get 请求 this.$http.get({url: '', headers: { Authorization: '' } }) .then(() => { // 请求成功回调 }, () => { // 请求失败回调 }); } });
headers配置
通过headers属性来配置请求头。
除了参数配置headers属性可以设置请求头外，在vue-resource中也提供了全局默认的headers配置
Vue.http.headers键值可以是HTTP方法名，common，custom，三种类型。这三种类型的配置会进行合并，优先级从低到高依次是common,custom,HTTP方法名。
其中common对应的请求头会在所有请求中设置，custom对应的请求头在非跨域时设置，HTTP方法名对应的请求头只有在请求的method匹配方法名时才会被设置。
基本HTTP调用
基本HTTP调用即普通的GET，POST等基本的HTTP操作实际上执行增，删，改，查是前后端开发人员共同约定的并非通过HTTP的请求方法如GET表示获取数据，PUT代表写入数据，POST表示更新数据。底层方法和便捷方法执行后返回一个Promise对象，可以使用Promise语法来注册成功，失败回调。
底层方法
全局的Vue.http方法和Vue组件的实例方法this.$http都属于底层方法，他们根据所传入option惨啊书的method属性来判断请求方式是GET还是POST，亦或是其它的HTTP的合法方法。
全局调用
Vue.http(option);
组件实例调用
this.$http(option)
全局调用和组件实例调用都是接收相同的option参数。都返回Promise对象。不同的是，全局方式回调this指向window，而组建实例调用方式回调指向组件实例。
组件实例方式发送POST请求
new Vue({ ready: function () { // POST请求 this.$http({ url: '', method: 'POST', // 请求体重发送的数据 data: { cat: 1 }, // 设置请求头 headers: { 'Content-Type': 'x-www-from-urlencoded' } }).then(function () { // 请求成功回调 }, function () { // 请求失败回调 }); } });
便捷方法
不同于底层方法，便捷方法是对底层方法的封装，在调用时可以省去配置选项option中的method属性。
vue-resource 提供的便捷方法：
get(url, [data], [options]);
post(url, [data], [options]);
put(url, [data], [options]);
patch(url, [data], [options]);
delete(url, [data], [options]);
jsonp(url, [data], [options]);
都是接受三个参数：
url（字符串），请求地址。可被options对象中url属性覆盖。
data（可选，字符串或对象），要发送的数据，可被options对象中的data属性覆盖。
options
便捷方法的POST请求：
this.$http.post( 'http://example.com', // 请求体重发送数据给服务端 { cat: 1, name: 'newBook' },{ 'headers': { 'Content-Type': 'x-www-form-urlencoded' } }).then(function () { // 成功回调 }, function () { // 失败回调 });
请求选项对象
option对象的各属性及含义
参数
类型
描述
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回调处理函数
credientials
boolean
表示跨域请求时是否需要使用凭证
emulateHTTP
boolean
发送PUT, PATCH, DELETE请求时以HTTP
emulateJSON
boolean
将request body以application/x-www-form-urlencoded content type发送
url
url（字符串）请求的URL地址
method
method(字符串)默认值为GET，请求的HTTP方法(GET,POST等)
data
data(对象或字符串)
默认值为:'',需要发送给服务端的数据。
data属性的值对method为POST，PUT，DElETE等请求会作为请求体来传送，对于GET，JSONP等方式的请求将会拼接在URL查询参数中。
params
params(对象)
默认值为：{}用来替换url中的模板变量，模板变量中为匹配到的属性添加在URL地址后边作为查询参数。
Vue.http({ url: 'http://example.com/{book}', params: { book: 'vue', cat: 1 } });
最终url为： http//example.com/vue?cat=1
headers
headers(对象)
默认值为:{},设置HTTP请求头
xhr
xhr（对象）默认值为null，该对象中属性都会应用到原生的xhr实例对象上。
upload
upload(对象)默认值为null，该对象的属性都会应用到原生的xhr实例对象的upload属性上。
jsonp
jsonp(字符串)
默认值为:callback，JSONP请求中回调函数的名字。
Vue.http({ url: 'http://example.com/book', method: 'JSONP', jsonp: 'cb' });
最终的URL地址为?cb=xxx
xxx 为 vue-resource 生成的随机串。
tiemout