Vue基础篇-- vue-resource网络请求
安装及导入
发送请求可以使用 Vue提供的 vue-resource 插件 或者 axios 包，vue-resource 是官网提供插件，这里介绍vue-resource，axios 可以看官网使用说明，文档也是通俗易懂。
Vue-resource 的项目地址 https://github.com/pagekit/vue-resource/blob/develop/docs/http.md。下载解压到本地即可使用，解压后的文件中包含下面几个文件。
vue-resource.common.js
vue-resource.esm.js
vue-resource.js // 页面导入这个文件即可
vue-resource.min.js // 这是压缩后的文件，功能同上
在导入vue-resource时，必须保证vue 已经被加载，只有命名空间中有 Vue 对象，才可以绑定$http属性，否则导入操作将会直接报错。
<script src="./../lib/vue.js"></script> 导入vue
<script src="./../lib/vue-resource.js"></script> 导入 vue-resource
发送请求
引入该模块后，所有可操作的属性和方法都被注册到 Vue.$http（或者.Vue.http）属性中，可以直接输出这个Vue.$http 查看相关的属性。
<script src="./../lib/vue.js"></script> 导入vue
<script src="./../lib/vue-resource.js"></script> 导入 vue-resource
<script>
console.log(Vue.http) 输出这个对象可以 看到这个对象中许多属性。
</script>
这个http属性中包含需要许多的属性和方法，属性包含了一些配置的信息等，必要时候我们可以直接进行配置。提供的方法则是用来我们发送http 请求的接口，需要时直接调用即可。这些方法都是异步的。
例如定义一个发送get 请求方法getInfo，当方法被调用时执行发送数据。
var vm = new Vue({
el:"#app",
data:{},
methods:{
getInfo: function(){
this.$http.get('http://www.shopping.com/path/to:', [config]).then(
successCallback(response){ // 成功的返回数据，response是返回的结果对象，，可以从response.body中获取返回的数据
response.status; // 返回信息的状态码
response.statusText;
response.headers.get('Expires'); // 头
this.someData = response.body; // 返回的数据信息
},
errorCallback(response){} // 失败后调用该函数
);
}
}
})
这个些方法都是基于Promise实现异步的，使用.then方法可以指定两个请求的回调函数，一个用来处理成功的结果，一个用来处理错误的信息。是否请求成功是根据返回的状态码决定的，默认的成功状态码是 200 - 299
发送请求时可以指定参数来配置本次http请求的头信息，查询字符串，数据格式等等信息，下面会详细讲解这些参数。
请求方法
get(url, [config])head(url, [config])delete(url, [config])jsonp(url, [config])post(url, [body], [config])put(url, [body], [config])patch(url, [body], [config])
调用上述的方法即可发送相应请求，然后通过 .then() 指定处理回调的函数即可。
// 全局中使用时。Vue是全局对象
Vue.http.get('/someUrl', [config]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [config]).then(successCallback, errorCallback);
// 局部使用时，也就是在某个Vue对象实例内部定义的，this是Vue对象的实例
this.$http.get('/someUrl', [config]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [config]).then(successCallback, errorCallback);
config参数说明
config 主要是对本次http 请求再次进行配置，通过关系request 请求对象上的属性来实现对请求的配置，常用的配置参数如下：
| 参数 |
类型 |
描述 |
| url | string |
请求的目的 url |
| body | Object, FormData, string |
发送的 body 中的数据 |
| headers | Object |
对象中设置各个header |
| params | Object |
url中查询字符串的值 |
| method | string |
HTTP method （GET, POST, ...) |
| responseType | string |
返回的response.body数据的类型 (e.g. text, blob, json, ...) |
| timeout | number |
请求超时时间，单位毫秒(0 表示不会超时） |
| credentials | boolean |
Indicates whether or not cross-site Access-Control requests should be made using credentials |
| emulateHTTP | boolean |
Send PUT, PATCH and DELETE requests with a HTTP POST and set the X-HTTP-Method-Override header |
| emulateJSON | boolean |
使用 作为请求的content-type |
| before | function(request) |
发送请求前修改请求对象的钩子函数，参数为request对象 |
| uploadProgress | function(event) |
处理上传事件流程的回调函数 |
| downloadProgress | function(event) |
处理下载事件流程的回调函数 |
response对象中封装的属性
与发送请求类似，返回的结果会被封装为一个response对象，这个对象有后端发送过来的数据，请求头，请求的状态等信息，直接通过 response.attribute 的方式即可获取对应的属性值。
| Property | Type | Description |
| url | string |
数据返回时原始的url |
| body | Object, Blob, string |
返回的数据 |
| headers | Header |
Response 头信息对象 |
| ok | boolean |
HTTP 状态码描述 200 - 299为ok |
| status | number |
状态码 |
| statusText | string |
状态码描述 |
| Method | Type | Description |
| text() | Promise |
将body 中的数据按字符串形式输出 |
| json() | Promise |
将body中的数据解析为json对象 |
| blob() | Promise |
将body中的数据输出为一个二进制的blob对象，例如图片数据等 |
