1. 什么是Axios
Axios是一个开源的可以用在浏览器端和NodeJs的异步通信框架,她的主要作用就是实现AJAX异步通信,其功能特点如下:
- 从浏览器中创建XMLHttpRequests
- 从nodejs创建http请求
- 支持Promise API [JS中链式编程]
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF (跨站请求伪造)
网址
- GitHub: https://github.com/axios/axios
- 中文文档: http://www.axios-js.com/
2. 为什么要使用Axios
由于vue.js是一个视图层框架并且作者((尤雨溪)严格准守SoC (关注度分离原则),所以Vue.js并不包含AJAX的通信功能,为了解决通信问题,作者单独开发了一个名为vue-resource的插件,不过在进入2.0版本以后停止了对该插件的维护并推荐了Axios框架。少用jQuery,因为它操作Dom太频繁!
3. 安装
Using npm:
$ npm install axios
Using bower:
$ bower install axios
Using cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
4. 演示
创建data.json文件模仿后台返回数据
{
"name":"狂神说Java",
"url":"https://blog.kuangstudy.com",
"page": 1,
"isNonProfit": true,
"address":{
"street":"含光门",
"city":"陕西西安",
"country":"中国"
},
"links":[
{
"name": "bilibili",
"url": "https://space.bilibili.com/95256449 name"
},
{
"name": "狂伸说java",
"url": "https://blog.kuangstudy.com"
},
{
"name": "百度",
"url": "https://www.baidu.com"
}
]
}
在html使用cdn导入js
<!--1.导入vue,js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios get请求
data接收数据,请求的返回参数合适,必和json字符串一样
<script type="text/javascript">
var example2 = new Vue({
el: '#vue',
data() {
return {
//请求的返回参数合适,必和json字符串一样
info:{
name: null,
address: {
street: null,
city: null,
country: null
}
}
}
},
mounted(){
//钩子函数
axios.get('../data.json').then(response=>(this.info=response.data));
}
})
</script>
接收展示
<body>
<div id="vue" v-cloak>
<div>{
{info.name}}</div>
<div>{
{info.address.country}}</div>
</div>