1. axios概述
目标：axios的用途及了解常见方法
小结：
axios的作用：发送异步请求获取数据。常见的方法：get、post；在发送的时候可以指定参数（地址、请求方式和请求头部信息）；返回数据结构（data/status/statusText/headers/config）
2. axios方法及get、post方法使用
目标：使用axios方法获取数据并在页面中将数据遍历显示；切换改为get/post方法实现数据加载
小结：
可以使用axios获取对应服务器数据；如果不是同一个服务的数据则可能会出现跨域请求；需要在响应的服务器上配置跨域。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="js/axios.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(user, index) in users" :key="index">
{{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
users:[]
},
created(){
//初始化加载数据
axios.post("data.json").then(res=>{
console.log(res);
//将数据赋值到vue实例中的数据属性users；
//不能使用this，在axios回调函数中表示窗口，不是vue实例
app.users = res.data;
}).catch(err=>alert(err));
axios.get("http://localhost/user/8").then(res=>{
console.log(res.data);
}).catch(err=>alert(err));
/*
axios.get("data.json").then(res=>{
console.log(res);
//将数据赋值到vue实例中的数据属性users；
//不能使用this，在axios回调函数中表示窗口，不是vue实例
app.users = res.data;
}).catch(err=>alert(err));
*/
/*
axios({
url:"data.json",
method:"get"
}).then(res=>{
console.log(res);
//将数据赋值到vue实例中的数据属性users；
//不能使用this，在axios回调函数中表示窗口，不是vue实例
app.users = res.data;
}).catch(err=>alert(err));
*/
}
});
</script>
</body>
</html>
6864
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
