Vue.js-Axios异步通信
2025-01-04 本文已影响0人
ssttIsme
Axios是一个开源的可以用在浏览器和NodeJS的异步通信框架，它的主要作用是实现AJAX异步通信，功能如下：
- 从浏览器中创建
XMLHttpRequests - 从Node.js创建HTTP请求
- 支持Promise API
- 拦截请和响应
- 转换请求数据和响应数据
- 自动转换JSON数据
- 客户端支持防御XSRF(跨站请求伪造)
data.json
{
"name": "故宫",
"address": {
"street": "东城区景山前街4号",
"city": "北京市",
"country":"中国"
},
"url": "https://baike.baidu.com/item/%E5%8C%97%E4%BA%AC%E6%95%85%E5%AE%AB/345415?fr=aladdin",
"page": 1
}
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>axios</title>
</head>
<body>
<div id="app">
<div>{{info.name}}</div>
<div>{{info.address.country}}</div>
<div>{{info.address.city}}</div>
<div>{{info.address.street}}</div>
<a v-bind:href="info.url">点击了解更多</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
var vm=new Vue({
el: '#app',
data(){
return{
info:{
name: null ,
address: {
street:null,
city:null,
country:null
},
url: null
},
}
},
mounted(){
axios.get('data.json').then(response=>(this.info=response.data));
}
});
</script>
</body>
</html>
