|
什么是Axios？
Axios是一个开源的可以用在浏览器端和NodeJS的异步通信框架，它的主要作用是实现AJAX异步通信，其功能特点如下：
- 从浏览器中创建XMLHttpRequests
- 从node.js创建http请求
- 支持Promise API（JS中链式编程）
- 拦截请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御 XSRF （跨站请求伪造）
案例：通过axios获取数据并绑定值
数据文件a.json
{
"name":"狂神说Java",
"url":"https://..",
"page":1,
"isNonProfit":true,
"address":{
"street":"含光",
"city":"陕西",
"country":"中国"
},
"links":[
{
"name":"bilibili",
"url":"https://space.bili..."
},
{
"name":"狂神说Java",
"url":"https://space.bili..."
},
{
"name":"百度",
"url":"https://space.bili..."
}
]
}
获取a.json内的数据并将它们绑定到组件中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<div>{{info.name}}</div>
<div>{{info.address.city}}</div>
<a v-bind:href="info.url">点我</a>
</div>
</body>
<script src="vue/开发版/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data(){
return{
info:{
name:null,
address:{
country:null,
city:null,
street:null
},
url:null
}
}
},
mounted(){
axios
.get("a.json")
.then(response => (this.info =response.data));
}
})
</script>
</html>
```
|