这两天学习了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-/books', // 成功回调 function ( data, status, request ) { if ( status == 200 ) { consl.dir(data); } }, // 配置请求头 headres: { 'Content-Type': 'multipart/form-data' });// 实例配置的优先级高于全局配置

跨域请求出错

跨域请求需要服务端开启CORS支持

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。