Vue之Axios的异步通信详解
目录
- 1.什么是Axios
- 2、为什么要使用Axios
- 3、第一个Axios应用程序
- 4、Vue的生命周期
- 总结
1.什么是Axios Axios是一个开源的可以用在浏览器端和
Node JS
的异步通信框架, 她的主要作用就是实现AJAX异步通信,其功能特点如下:- 从浏览器中创建
XMLHttpRequests
- 从node.js创建http请求
- 支持Promise API[JS中链式编程]
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF(跨站请求伪造)
中文文档:http://www.axios-js.com/
2、为什么要使用Axios 由于
Vue.js
是一个视图层框架并且作者(尤雨溪) 严格准守SoC(关注度分离原则)所以Vue.js
并不包含AJAX的通信功能, 为了解决通信问题, 作者单独开发了一个名为vue-resource
的插件, 不过在进入2.0版本以后停止了对该插件的维护并推荐了Axios
框架。少用jQuery, 因为它操作Dom太频繁!3、第一个Axios应用程序 咱们开发的接口大部分都是采用JSON格式, 可以先在项目里模拟一段JSON数据, 数据内容如下:创建一个名为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": "狂神说Java","url": "https://blog.kuangstudy.com"},{"name": "百度","url": "https://www.baidu.com/"}]}
测试代码
Title - 锐客网 [v-cloak]{display: none; }地名:{{info.name}}地址:{{info.address.country}}--{{info.address.city}}--{{info.address.street}}链接:{{info.url}}
说明:
1.在这里使用了v-bind将a:href的属性值与Vue实例中的数据进行绑定
2.使用axios框架的get方法请求AJAX并自动将数据封装进了Vue实例的数据对象中我们在data中
3.的数据结构必须和
Ajax
响应回来的数据格式匹配!4、Vue的生命周期 官方文档:https://cn.vuejs.org/v2/guide/instance.html#生命周期图示
Vue实例有一个完整的生命周期,也就是从开始创建初女台化数据、编译模板、挂载DOM、渲染一更新一渲染、卸载等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。
在Vue的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册JS方法,可以让我们用自己注册的JS方法控制整个大局,在这些事件响应方法中的this直接指向的是Vue的实例。
文章图片
总结 【Vue之Axios的异步通信详解】本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!
推荐阅读
- 蓝桥杯单片机|【蓝桥杯单片机的备赛旅行日记系列】之省赛初赛代码免费下载
- Java设计模式|Java设计模式之概述与七大设计原则
- java绘图模式_图解Java设计模式之设计模式七大原则
- vue中data和data()的区别说明
- Ant|Ant design vue中的联动选择取消操作
- vue通过v-show实现回到顶部top效果
- 产品实习之竞品分析报告篇
- 20多个好用的 Vue 组件库,请查收!
- 信息论与编码之信源编码详解
- opencv|opencv 学习笔记(一) 矩阵构造之输出