vue 请求数据方式

vue 请求数据方式

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

一、vue-resource 请求数据

1. npm 安装 vue-resource

   npm install vue-resource --save
   

   说明：使用 --save 是为了在 package.json 中引用，表示在生产环境中使用。如果要将代码打包发送他人、上传到github，或者要发布代码时，package.json 就是安装所需要的包。那么，当在开发环境中时，使用 --save-dev；当在生产环境中，使用 --save。

2. 在 main.js 即入口文件中引入 vue-resource；

   import VueResource from 'vue-resource';
   

3. 引入后，需使用；

   Vue.use(VueResource);
   

4. 在代码中使用：

   {
     // GET /someUrl
     this.$http.get('/someUrl').then(response => {
   
       // get body data
       this.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 请求数据

1. npm 安装 axios

   npm install axios --save
   

2. 在 main.js 即入口文件中引入 axios；

   import Axios from 'axios';
   
   Vue.prototype.$axios = Axios;
   

   说明：第一行是引入 axios；第二行是 axios 的一种快捷写法，将 axios 绑定在 Vue 的原型上，这样在其它页面中使用 axios 请求数据就不用引入了，直接使用即可。

3. 配置 axios 跨域请求代理

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

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

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

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

5. 上面配置成功后，即可在组件中使用 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
     });  
   

6. 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 complete
   		    console.log(acct);
   		    console.log(perms);
   	  }));
   }
   

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

三、fetchJsonp 请求数据

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

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