什么是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>