|
axios是独立于vue的一个项目，基于promise用于浏览器和node.js的http客户端
- 在浏览器中可以帮助我们完成 ajax请求的发送
- 在node.js中可以向远程接口发送请求
<body>
<div id="app">
<div v-for="user in userList">
{{user.name}} -- {{user.age}}
</div>
</div>
<script src="vue.min.js"></script>
<script src="axios.min.js"></script>
<script>
new Vue({
el: '#app',
//固定的结构
data: { //在data定义变量和初始值
userList: []//数组
},
created(){ //页面渲染之前执行
//调用定义的方法
this.getUserList()
},
methods:{ // 编写具体的方法
//创建方法 查询所以用户数据
getUserList() {
//使用axios发送ajax请求
//axios.提交放松("请求接口路径").then(箭头函数).catch(箭头函数)
axios.get("data.json")
.then(response =>{
//response就是请求之后返回数据
console.log(response)
this.userList = response.data.data.items
})
.catch(error =>{
//请求失败执行catch方法
console.log(error)
})
}
}
})
</script>
</body>
注意：测试时需要开启后端服务器，并且后端开启跨域访问权限?
{
"sucess":true,
"code":200,
"message":"成功",
"data":{
"items":[
{"name":"lucy","age":20},
{"name":"mary","age":30},
{"name":"jack","age":40}
]
}
}
|