十、Axios异步通信
10.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/
10.2 为什么要使用Axios
由于Vue.js是一个视图层框架,并且作者严格遵守SOC(关注度分离原则),所以Vue.js并不包含AJAX的通信功能,为了解决通信问题,作者单独开发了一个名为vue-resource的插件,不过在进入2.0版本以后停止了对该插件的维护并推荐了Axios框架。少用jQuery,因为它的DOM操作太频繁。
10.3 第一个Axios应用程序
咱们开发的接口大部分都是采用JSON格式,可以先在项目里模拟一段JSON数据,数据内容如下:
创建一个名为data.json的文件并填入以下内容,放在项目的根目录下。
{
"name": "我的博客",
"url": "https://blog.csdn.net/weixin_44421143?spm=1000.2115.3001.5343",
"page": 1,
"isNonProfit": true,
"address": {
"street": "向阳路",
"city": "河南新乡",
"country": "中国"
},
"links": [
{
"name": "bilibili",
"url": "https://www.bilibili.com/"
},
{
"name": "百度",
"url": "https://www.baidu.com/"
},
{
"name": "CSDN",
"url": "https://www.csdn.net/"
}
]
}
Json字符串,要请求到前端去接收。
首先要通过在线CDN的方式把这个axios.js的包导入进来。(把Vue的也导进来)
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
- 钩子函数mounted(){}
<body>
<div id="vue">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/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',
mounted(){ //钩子函数 链式编程 ES6新特性
axios.get('data.json').then(response=>(console.log(response.data)));
} //如果和data.json不在同一级目录,还要将相对路径写正确
})
</script>
</body>
- 再把获取到的数据渲染到页面上去
我们这时就不再是console.log()了,而是把get到的data.json数据返回到我们Vue实例的data属性当中去。我们此处不是用的vm的data属性
,而是data()方法
去接收返回到的数据。
<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(){ //钩子函数 链式编程 ES6新特性
axios.get('./data.json').then(response=>(this.info=response.data));
}
})
</script>
我们通过.then(response=>(this.info = response.data)),把data.json文件中的json对象赋给了info。
然后通过一个固定的写法
data(){
return{
}
}
来获取response返回的数据。
在里面再定义info。注意此处,你要接收什么数据,一定要和json中的一样,不想接收的可以不写上去,但是想接收的要和json中的一样。可以理解为先“摆格式”等待json的传入。
然后我们测试一下,看看info里面的数据是不是能拿到前端显示:
<div id="vue">
<div>{{info.name}}</div>
</div>
拿到了info.name,那么其他的数据肯定也都能拿到。
再多写几个数据。
<div id="vue">
<div>{{info.name}}</div>
<div>{{info.address.street}}</div>
<a v-bind:href="info.url">点我</a>
</div>
- 注意:
如果你的a标签是这样写的
<a>{{info.url}}</a>
那么它只会认为是一个纯文本字符串。
如果是这样写的
<a href="info.url">点我</a>
它会认为是一个叫做“/info.url”的路径跳转。
必须要用v-bind和Vue实例中的属性去绑定。
可以理解为除了div标签可以用{{}}去绑定数据之外,其他标签一律都要使用v-bind做数据绑定才可以。