vue使用ajax请求后台数据的方法-创新互联

这篇文章主要介绍了vue使用ajax请求后台数据的方法，具有一定借鉴价值，需要的朋友可以参考下。下面就和我一起来看看吧。

vue本身它是不支持直接发送ajax请求的，需要用到axios（一个基于promise的HTTP库，可以用在浏览器和node.js中）

第一步：Axios的安装和引入

1.使用npm安装：

    $npm install axios -S

2.在vue项目公共文件（我这里是main.js文件）中引入：

    import axios from "axios"；

3.但是呢axios跟很多第三方模块不同的一点是它不能直接使用use方法，而是用下面这种方法：

    Vue.prototype.$axios = axios;

4.这样呢在methods里用到的时候直接用this.$axios来调用它：

this.$axios.get(接口地址).then(function(respon){}).catch(function(error){})

第二步：axios.get

1.通过params选项来传递参数的格式是 axios.get('url',{params:{key:value}}).then() ；

2.本次实例的axios请求后台数据代码：

//右边学员动态
        getbuyer: function () {
          this.$axios.get(this.GLOBAL.host+"/pub/api/v1/web/list_buyer",{
            params:{
              video_id:this.$route.query.video_id
            }
          }).then(res=>{
            var result = res.data;
            if (result.code == 0) {
              this.buyerArr = result.data;
            }
          })
        }

解析：

1）this.GLOBAL.host: 由于一个项目中会有很多次ajax请求，我们可以把域名封装在一个单独的模块中，然后用到的时候直接调用，操作代码如下：
    

首先：在main.js全局文件中import我们的封装模块global：import Global from'../static/config/global'然后：将上面的Global挂载到Vue.prototype：Vue.prototype.GLOBAL = Global;其次：host是在global.js模块中封装的域名：const host = 'http://api.xdclass.net:8081';最后：在每次axios请求的时候，直接 this.GLOBAL.host+"后台接口地址"这样就可以了

2）params里面是请求接口时的参数，可以一个也可以多个，用“，”隔开；

3）我这个参数写法 this.$route.query.video_id ，意思是获取到当前页面地址栏中url参数名为video_id的参数值；

4）.then中就是请求接口成功后要做的事情，res是responce的简写，就是成功后后台给我们返回的对象，数据就在这个对象里面；

5）this.buyerArr 是定义在data中的一个空数组，用来接收后台返回的数据

以上就是vue使用ajax请求后台数据的方法的详细内容了，看完之后是否有所收获呢？如果想了解更多相关内容，欢迎来创新互联行业资讯！