vue实战使用ajax请求后台数据（小白）
前言：前端小白入门到这个阶段，应该会知道我们所做的页面上那些数据，绝大部分都不是静态的数据，而是通过调用后台接口把数据渲染到页面上的效果。ajax可以帮助我们更好的去实现这一点，下面是详解在vue中如何使用它。
vue本身它是不支持直接发送ajax请求的，需要用到axios（一个基于promise的HTTP库，可以用在浏览器和node.js中）这是Axios文档的介绍，详细可查看：https://www.kancloud.cn/yunye/axios/234845
第一步：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（这次先讲get的实例，下一篇写用axios.post显现登录功能）
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中的一个空数组，用来接收后台返回的数据
最后：一个简单的axios请求实例就写完了，在这里给新手们推荐一款软件Postman用来模拟请求后台数据,非常简单易用，也能更好的观察接口数据；下面是我的一个例子
这个例子就这么多，下次就写post做登录的例子，大家也可以一起来：854讨论656前端的221各种问题和bug，一起学习一起进步；
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://www.cnblogs.com/nbb-hbb/
原文地址：https://www.cnblogs.com/nbb-hbb/p/9836815.html