vue本身它是不支持直接发送ajax请求的,需要用到axios(一个基于promise的HTTP库,可以用在浏览器和node.js中)这是Axios文档的介绍,详细可查看:https://www.kancloud.cn/yunye/axios/234845
第一步:Axios的安装和引入
1.使用npm安装:
1$npm install axios -S
2.在vue项目公共文件(我这里是main.js文件)中引入:
1import
axios from
"axios"
;
3.但是呢axios跟很多第三方模块不同的一点是它不能直接使用use方法,而是用下面这种方法:
1Vue.prototype.$axios = axios;
4.这样呢在methods里用到的时候直接用this.$axios来调用它:
1this
.$axios.get(接口地址).then(
function
(respon){}).
catch
(
function
(error){})
第二步:axios.get(这次先讲get的实例,下一篇写用axios.post显现登录功能)
1.通过params选项来传递参数的格式是 axios.get('url',{params:{key:value}}).then() ;
2.本次实例的axios请求后台数据代码:
12345678910111213//右边学员动态
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请求,我们可以把域名封装在一个单独的模块中,然后用到的时候直接调用,操作代码如下:
1首先:在main.js全局文件中
import
我们的封装模块global:<br><br>
import
Global from
'../static/config/global'
<br><br>然后:将上面的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中的一个空数组,用来接收后台返回的数据