Axios是一个开源的可以用在浏览器端和Node JS的异步通信框架, 她的主要作用就是实现AJAX异步通信,其功能特点如下: 官网:起步 | Axios 中文文档 (axios-http.cn)
3.2为什么使用新的Axios 而不使用JQuery从浏览器中创建XMLHttpRequests
从node.js创建http请求
支持Promise API[JS中链式编程]
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF(跨站请求伪造)
由于Vue.js是一个视图层框架并且作者(尤雨溪) 严格准守SoC(关注度分离原则)所以Vue.js并不包含AJAX的通信功能, 为了解决通信问题, 作者单独开发了一个名为vue-resource的插件, 不过在进入2.0版本以后停止了对该插件的维护并推荐了Axios框架。
由于jQuery *** 作Dom太频繁,所以少用 (其实这个框架简化了刷新的 *** 作,相当于再此的封装
3.2 测试Axios 实现第一个异步响应1. 首先准备JSON的数据
{ "name":"java学习", "url": "http://baidu.com", "page": "1", "isNonProfit":"true", "address": { "street": "阜阳", "city":"安徽", "country": "中国" }, "links": [ { "name": "百度", "url": "https://www.baidu.com/" } ] }
2.测试前引入Axios 的js 文件,(没有安装的情况下,推荐使用 cdn 引入 )
{{info.name}}
{{info.address}}
一定注意看注释,
mounted(){ //钩子函数, 这个地址是数据表的地址 把这里的得到的数据,传给data方法 axios.get('../mydata.json').then(response=>(this.info=response.data)) }
- 使用axios框架的get方法请求AJAX并自动将数据封装进了Vue实例的数据对象中
- 我们在data中的数据结构必须和Ajax响应回来的数据格式匹配
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)