vue使用ajax请求后台数据的方法 - 行业资讯 - 肥雀云

介绍

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

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

<强>第一步:axios的安装和引入

1。使用npm安装:

<>以前美元npm安装axios - s

2。在vue项目公共文件(我这里是主要的。js文件)中引入:

<>之前从“进口axios axios";

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

 Vue.prototype。axios美元=axios;

4。这样呢在方法里用到的时候直接用。美元axios来调用它:

。美元axios.get(接口地址),然后(函数(应答){}).catch(函数(错误){})<强>  
 <强>

<强>第二步:axios.get

1。通过参数选项来传递参数的格式是axios.get (& # 39; url # 39;,{参数:{键:值}}),然后();

2。本次实例的axios请求后台数据代码:

 
//右边学员动态
,,,,,,,getbuyer:函数(){
,,,,,,,,,美元。axios.get (this.GLOBAL.host +“/酒吧/api/v1/web/list_buyer", {
,,,,,,,,,,,参数:{
,,,,,,,,,,,,,video_id:这route.query.video_id美元。
,,,,,,,,,,,}
,,,,,,,,,})(res=祝辞{
,,,,,,,,,,,var=res.data;结果
,,,,,,,,,,,如果结果。代码==0){
,,,,,,,,,,,,,这一点。buyerArr=result.data; 
,,,,,,,,,,,}
,,,,,,,,,})
,,,,,,,}

解析:

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

<>之前首先:在主要。js全局文件中导入我们的封装模块全球:进口全球从# 39;静态/config/. ./全球# 39;然后:将上面的全球挂载到Vue.prototype: Vue.prototype。全球=全球;其次:主机是在全球。js模块中封装的域名:const主机=& # 39;http://api.xdclass.net: 8081 & # 39;;最后:在每次axios请求的时候,直接this.GLOBAL.host +“后台接口地址,这样就可以了

2)参数里面是请求接口时的参数,可以一个也可以多个,用”、“隔开;

3)我这个参数写法。route.query美元。video_id,意思是获取到当前页面地址栏中url参数名为video_id的参数值;

4)中就是请求接口成功后要做的事情,res是反应的简写,就是成功后后台给我们返回的对象、数据就在这个对象里面;

5)。buyerArr是定义在数据中的一个空数组,用来接收后台返回的数据

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