vue 请求数据方式

Vue 请求数据方式有：vue-resource、axios、fetchJsonp三种。其中，vue-resource 是 Vue官方提供的插件，axios 与 fetchJsonp 是第三方插件。

一、vue-resource 请求数据

npm 安装 vue-resource
```
npm install vue-resource --save
```
说明：使用 --save 是为了在 package.json 中引用，表示在生产环境中使用。如果要将代码打包发送他人、上传到github，或者要发布代码时，package.json 就是安装所需要的包。那么，当在开发环境中时，使用 --save-dev；当在生产环境中，使用 --save。
在 main.js 即入口文件中引入 vue-resource；
```
import VueResource from 'vue-resource';
```
引入后，需使用；
```
Vue.use(VueResource);
```

在代码中使用：

{// GET /someUrlthis.$http.get('/someUrl').then(response => {// get body datathis.someData = response.body;}, response => {// error callback});
}

注意：vue-resource 的请求都是继承promise的。promise是属于异步请求；.then箭头函数里的this代表的是上下文。如果想获取外面的数据，请在在函数外声明，var that = this；将外层的this先储存到that中再引入函数内部。

vue-resource 参考文档：https://github.com/pagekit/vue-resource/blob/develop/docs/http.md

二、 axios 请求数据

npm 安装 axios
```
npm install axios --save
```
在 main.js 即入口文件中引入 axios；
```
import Axios from 'axios';Vue.prototype.$axios = Axios;
```
说明：第一行是引入 axios；第二行是 axios 的一种快捷写法，将 axios 绑定在 Vue 的原型上，这样在其它页面中使用 axios 请求数据就不用引入了，直接使用即可。

配置 axios 跨域请求代理

3.1. 进入 config 文件夹，打开 index.js 文件；
3.2. 找到 proxyTable: {}, 大概在 13行，在里面加入下面代码：

//做一个接口的代理
'/proxy_api':{   // 拦截转发路径，名字可以任意取，注意前面斜杠；target:'https://www.pubgmm.com',   //代理目标网址；changeOrigin:true,   //允许跨域pathRewrite:{'^/proxy_api':''   //重写路径}}

引入，在 Vue 原型上绑定一个变量 Host，名称随意；

Vue.prototype.HOST = '/proxy_api';  //注意与接口代理的名称一致；

上面配置成功后，即可在组件中使用 axios 的 Http 请求，如下：

var data = {id: 12345}；
this.API.post(url,data).then(res => {console.log(res);}).catch(function (error) {console.log(error);}).then(function () {// always executed});

axios 并发请求处理

methods(){getUserAccount(){return this.API.get(url1,data);},getUserPermissions(){return this.API.get(url2,data);},this.API.all([this.getUserAccount, this.getUserPermissions]).then(API.spread(function (acct, perms) {// Both requests are now completeconsole.log(acct);console.log(perms);}));
}

axios 参考文档：https://github.com/axios/axios

三、fetchJsonp 请求数据

在使用上面两种请求方式后，fetchJsonp 未做过多的研究，有感兴趣的你可以参考文档去学习使用： https://github.com/camsong/fetch-jsonp

坚持每分每秒，完成每时每刻！！！