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

坚持每分每秒,完成每时每刻!!!

Logo

前往低代码交流专区

更多推荐