VUE-05-Axios异步通信
概述
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
特性
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御XSRF(跨站请求伪造)
理由
Vue.js是一个视图层框架,并且作者(尤雨溪)严格遵守SoC(关注度分离原则),所以Vue.js并不包含AJAX的通信功能,为了解决通信问题,推荐使用Axios,其实jQuery中也封装了ajax,但是它对DOM的操作很频繁
data.json
{
"name":"中国",
"url": "http://baidu.com",
"page": "1",
"isNonProfit":"true",
"address": {
"street": "白杨街道",
"city":"浙江杭州",
"country": "中国"
},
"links": [
{
"name": "B站",
"url": "https://www.bilibili.com/"
},
{
"name": "4399",
"url": "https://www.4399.com/"
},
{
"name": "百度",
"url": "https://www.baidu.com/"
}
]
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[v-cloak]{
/*--未加载结束白屏*/
display: none;
}
</style>
</head>
<body>
<div id="vue" v-cloak>
<div>{{info.name}}</div>
<div>{{info.address.street}}</div>
<a v-bind:href="info.url">点我跳转</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var vm = new Vue({
el:"#vue",
//data 是属性
data(){//这个是方法
return{
//请求的返回参数格式,必须和json字符串格式一样
info:{
name:null,
address:{
street:null,
city:null,
country:null
},
url:null
}
}
},
mounted(){//钩子函数 链式编程
axios.get('data.json').then(res=>{
this.info = res.data
})
}
});
</script>
</body>
</html>