使用Axios实现异步通信需要先导入cdn：
<script src="https://unpkg.com/axios@1.4.0/dist/axios.min.js"></script>
使用到的数据data.json
{
"name":"kuang" ,
"url":"https://www.bilibili.com/?spm_id_from=333.788.0.0",
"page": 1,
"isNonProfit": true,
"address": {
"stress": "寒光",
"city": "西安",
"country": "中国"
},
"links": [
{
"name": "bilbil",
"url": "https://ss"
},
{
"name": "bilbil",
"url": "https://ss"
},
{
"name": "badu",
"url": "https://baidu"
}
]
}
对axios异步通信的理解：先展示文本数据，再动态加载数据，二者不同步。
<!--
例如如果网络卡顿会先展示纯文本
“{{info.name}}
{{info.address.stress}}
点我”
然后在接收到数据后自动加载(无需刷新网页)json格式数据中键的值
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="vue" v-clock>
<!-- axios实现异步通信：
例如如果网络卡顿会先展示纯文本
{{info.name}}
{{info.address.stress}}
点我
然后在接收到数据后自动加载(无需刷新网页)json格式数据中键的值
-->
<div>{{info.name}}</div>
<div>{{info.address.stress}}</div>
<a v-bind:href="info.url">点我</a>
</div>
<script src="https://unpkg.com/axios@1.4.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <script type="text/javascript">
var vm=new Vue({
el:"#vue",
data(){ return{
info:{
name:null,
address:{
stress:null,
city:null,
country:null
},
url:null
}
}
},
mounted(){//钩子函数
axios.get('../data.json').then(response=>(this.info=response.data));
}
});
</script>
</body>
</html>
最终在浏览器展示的结果：
总结：异步通信axios，与ajax类似，通过先在网页放置文本格式数据，再动态加载出数值格式数据，无需刷新网页
