Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中
主要用于实现Ajax异步通信
特性
从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF
cdn引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--v-clock解决闪烁问题-->
<style>
[v-clock]{
display: none;
}
</style>
</head>
<body>
<div id="vue" v-clock>
<div>{{info.name}}</div>
<div>{{info.address.street}}</div>
<a v-bind:href="info.url">click me</a>
</div>
<!--引入js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type= "text/javascript">
var vm = new Vue({
el: '#vue',
data(){
return{
//请求返回参数格式必须和json字符串一致
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>