Vue学习--Axios异步通信
程序员文章站
2022-07-12 19:17:05
...
什么是Axios
- 之前，前端与后端进行数据资源交互，用到的是jQuery下的Ajax。现在axios的出现，可以干之前ajax干的活。Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post请求。
值得注意的是，axios要求浏览器中的JS版本为ECMAScript6及以上。
使用方式
- 可以去官网下载，也可以使用在线cdn，本文采取后者，方便内容讲解
<!--通过cdn方式引入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
在使用之前先交代一个事情：
-
Vue在渲染数据时，存在一个生命周期，只是由于网速太快，对我们开发者以及用户而言，初始化的部分仅仅是一瞬间的事，但是它是真实存在的。在这其中，有许多的“钩子函数”，就是在Vue初始化的各个阶段，可以在各个阶段节点编写函数，使之触发。
-
Vue生命周期中有一个mounted阶段，该阶段一般用于进行ajax请求来初始化数据，所以可以在这个阶段编写axios函数来进行调用。（注：mounted阶段，在整个实例只执行一次）
接下来我们通过一个案例来进行演示：
首先创建一个student.json文件作为数据来源：
{
"name" : "小明",
"age" : 18,
"hobbies" : ["唱歌","跳舞","Rap","打篮球"],
"homie" : [
{
"name" : "小华",
"age" : 13
},
{
"name" : "小李",
"age" : 15
},
{
"name" : "小建",
"age" : 20
},
{
"name" : "小蛇",
"age" : 13
}
]
}
前端调用
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Axios</title>
</head>
<style>
[v-clock]{
display: none; /*解决闪烁问题*/
}
</style>
<body>
<div id="vueApp" v-clock>
<p>{{student.name}}</p>
<ul>
爱好<br/>
<li v-for="hobby in student.hobbies">{{hobby}}</li>
</ul>
<ul>
老铁们<br/>
<li v-for="bro in student.homie">{{bro.name}}--{{bro.age}}</li>
</ul>
</div>
<!--通过cdn方式引入vue-->
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<!--通过cdn方式引入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
let vm = new Vue({
el: "#vueApp",
data(){//这是个函数对象，与data属性对象区分开
return{
//请求返回的参数内容要与json数据相符
//这里只是写一个模板，用于以后接收后端传递过来的json数据
student : {
name : null,
age : null,
hobbies : [],
homie : []
}
}
},
mounted(){//钩子函数，用于在初始化Vue对象前执行的函数
/*
* axios函数类似于ajax，编程方式为链式编程
* get方法中的参数为请求资源的url
* then()方法有点类似于成功之后的回调函数,注意JavaScript的版本要为EMS6
* */
axios.get('student.json').then(response=>(this.student = response.data));
}
});
</script>
</body>
</html>
关于解决前端闪烁的问题（前端会先显示数据模板，闪烁一下后才显示真实数据）：
- 在Vue作用的Dom对象上增加一个 v-clock属性
<div id="vueApp" v-clock>
...
</div>
- 然后在样式表中如下定义：
<style>
[v-clock]{/*属性选择器*/
display: none; /*解决闪烁问题*/
}
</style>
上一篇： Vue axios异步通信和计算属性
下一篇： Springboot 打包注意问题