一、Axios先容
1、是什么
Axios 是一个基于 promise 的 HTTP 库，简朴的讲就是可以发送get、post请求。固然这些请求ajax和jquery也能做，但是由于Vue、React等框架的出现，促使了Axios轻量级库的出现，由于Vue等，不需要操纵Dom，所以不需要引入Jquery.js了。如许一来Axios就会更加方便。
2、特性
官网连接：起步 | Axios中文文档 | Axios中文网 (axios-http.cn)
3、安装
利用 npm（利用Vue框架的时间安装）:
$ npm install axios
利用 unpkg CDN:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
4、利用语法
以post和get请求为例（ps:axios的利用有很多种方法）：
post请求(ps:在URL后可以携带参数)
axios.post('URL') .then(function(response){ })；
get请求(ps:在URL后可以携带参数)
axios.get('URL') .then(function(response){ })；
二、案例实操
这里我们通过一个代码段来实现一下axios的数据请求功能。
①：我们准备好vue和axios所需的cdn：
- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
- {
- "name": "lfy",
- "age": 18,
- "url": "http://baidu.com",
- "page": 1,
- "address": {
- "street": "快乐街",
- "city": "成都",
- "country": "中国"
- },
- "list": ["Java","c++","Php"]
- }
- <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="vue"> <div>{{info.name}}</div> <div v-for="item in info.list"> {{item}} </div> <a v-bind:href="info.url">点我</a></div><!--导入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/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(){//这是一个data函数 return{ //请求的返回参数必须和json字符串格式一样 info:{ name:null, address:{ street:null, city:null, country:null }, url:null, list:[] } } }, mounted(){//钩子函数 链式编程 ES6新特性 axios.get('../data.json').then(response=>(console.log(this.info=response.data))) } });</script></body></html>
三、总结
这里写的内容比力简朴，只是一个关于axios的先容和简朴的案例演示，盼望对正在观看的小伙伴有所帮助！
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
