Axios是一个用于浏览器和Node.js的开源异步通信库，常用于实现AJAX请求。由于Vue.js不包含内置的通信功能，因此推荐使用Axios。在文中，通过一个简单的例子展示了如何使用Axios从JSON文件获取并显示数据，强调了Axios的Promise支持和在Vue项目中的使用。
Axios异步通信
6.1、什么是Axios
Axios是一个开源的可以用在浏览器端和NodeJS 的异步通信框架，她的主要作用就是实现AJAX异步通信，其功能特点如下:
- 从浏览器中创建XMLHttpRequests
- 从node.js创建http请求
- 支持Promise API [JS中链式编程]
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF (跨站请求伪造)
GitHub: https://github.com/ axios/axios
中文文档: http://www.axios-js.com/
6.2、为什么要使用Axios
由于 Vue.js 是一个视图层框架且作者(尤雨溪) 严格准守SoC (关注度分离原则)，所以Vue.js并不包含Ajax的通信功能，为了解决通信问题，作者单独开发了一个名为 vue-resourc e的插件，不过在进入2.0 版本以后停止了对该插件的维护并推荐了Axios 框架。少用jQuery，因为它操作Dom太频繁 !
6.3、第一的Axios应用程序
在线的Axios
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
我们开发的接口大部分都是采用JSON格式，可以现在项目里模拟一段JSON数据，数据内容如下：创建一个data.json的文件并填入上面的内容吗，放在项目的根目录下
创建一个json格式的文件
{
"name": "狂神说Java",
"url": "https//blog.kuangstudy.com",
"isNonProfit": true,
"address": {
"street": "含光门",
"city": "陕西西安",
"country": "中国"
},
"links": [
{
"name": "bilibili",
"url": "https://space.bilibili.com/95256449"
},
{
"name": "狂神说Java",
"url": "https//blog.kuangstudy.com"
},
{
"name": "百度",
"url": "https://www.baidu.com/"
}
]
}
<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">点我</a>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#vue",
//data：属性：vm
data(){
return{
//请求的返回格式，必须和json字符串一样
info:{
name: null,
address: {
street: null,
city: null,
country: null
},
url: null
}
}
},
mounted(){//钩子函数 链式编程 Es6新特性
axios.get("../../data.json").then(response=>{this.info=response.data});
}
});
</script>
</body>
解决闪烁问题
<style>
[v-clock]{
display: none;
}
</style>
扫一扫
3699
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
