Axios
一、基本说明
axios是独立于vue的一个项目，不是vue的一部分
axios通常和Vue一起使用，实现Ajax操作
axios是一个基于Promise的Http库
将JSON对象装成JSON.stringify(response)格式化输出JSON字符串，方便观察分析
二、实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Axios使用</title>
</head>
<!--引入vue和axios-->
<script type="text/javascript" src="script/vue.js"></script>
<script type="text/javascript" src="script/axios.min.js"></script>
<body>
<!--创建容器-->
<div id="app">
<table border="1" width="300">
<tr>
<th>名字</th>
<th>年龄</th>
</tr>
<tr v-for="monster in monsters">
<td>{{monster.name}}</td>
<td>{{monster.age}}</td>
</tr>
</table>
</div>
<!--创建vue对象-->
<script type="text/javascript">
let vm = new Vue({
el: "#app",
data: {
//定义一个数组，获取到的数据赋值给monster
monsters: []
},
methods: {
list() {
// 发出Ajax请求
/*
* 1.axios.get() 表示发出Ajax请求
* 2.http://localhost:63342/frontend_study/axios_study/data/response.data.json 表示请求的URL
* 这个和之前学的Promise的用法没有太大区别
* 3.axios发出Ajax请求的基本语法
* 3.1 axios.get(url).then(箭头函数)...catch(箭头函数)
* 3.2 如果get请求成功就进入到第一个then()
* 3.3 可以再次发出Ajax请求，在前一个then()中发出请求，并且要将get()返回，才可以调用then()方法
* 3.4 如果有异常，会进入catch(箭头函数)
* 4.list() 应当在created()方法中调用
* */
axios.get("http://localhost:63342/frontend_study/axios_study/data/response.data.json").then(returnData => {
//打印信息
// console.log("returnData======>",returnData);
// 把JSON对象转换成字符串方便观察
console.log("json字符串===>",JSON.stringify(returnData))
// console.log("returnData.data======>",returnData.data);
// console.log("returnData.data======>",returnData.data.data);
console.log("returnData.data.items======>",returnData.data.data.items);
//将数据赋值给数据池中的monsters
this.monsters = returnData.data.data.items;
// 可以发出第二次Ajax请求
return axios.get("http://localhost:63342/frontend_study/axios_study/data/response.data.json")
}).then(returnData=>{
console.log("第二次请求returnData.data.items======>",returnData.data.data.items);
}).catch(error=>{
console.log("错误为==>",error)
})
}
},
created(){
this.list();
}
});
</script>
</body>
</html>