1.axios是独立的项目,不是vue的一部分,使用axios经常和vue一起使用,实现ajax操作
2.axios的使用场景:前端发送ajax请求到后端,后端将数据返回给前端
3.使用:
1.创建一个html页面,引入vue的js和axios的js文件
2.创建一个json文件,用来模拟后端数据
3.编写读取数据成功的then方法和不成功的catch方法
4.在页面中显示用来测试是否读取成功
一定要注意,this.userList里面的this this.getList()里面的this 全都不能省略,要不然就识别不了,很重要!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-for="us in userList">
{{us.name}} -- {{us.age}}
</div>
</div>
<script src="vue.min.js"></script>
<script src="axios.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
userList: []
},
created() {
//调用方法 注意,此处的this是必须的,要不然无法识别
this.getList()
},
methods: {//在这里面编写具体方法
getList() {
//使用axios发送ajax请求
//格式:axios.get("请求接口路径").then(箭头函数).catch(箭头函数)
axios.get("data.json").then(response => {//then函数是请求成功之后的操作
console.log(response) //response是请求之后返回的数据
//这里这个this.userList的this也千万不能忘,要不然前面v-for就没法渲染出来,我在这个地方折腾了半个多小时
this.userList = response.data.data.items
console.log(this.users)
}).catch(error => {
console.log("请求失败")
})
}
}
})
</script>
</body>
</html>
{
"success":true,
"code":20000,
"message":"成功",
"data":{
"items":[
{"name":"a","age":20},
{"name":"b","age":30},
{"name":"c","age":40}
]
}
}