Vue Axios的异步通信怎么实现

这篇文章主要介绍了Vue Axios的异步通信怎么实现的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue Axios的异步通信怎么实现文章都会有所收获，下面我们一起来看看吧。

1.什么是Axios

Axios是一个开源的可以用在浏览器端和Node JS的异步通信框架， 她的主要作用就是实现AJAX异步通信，其功能特点如下：

• 从浏览器中创建XMLHttpRequests

• 从node.js创建http请求

• 支持Promise API[JS中链式编程]

• 拦截请求和响应

• 转换请求数据和响应数据

• 取消请求

• 自动转换JSON数据

• 客户端支持防御XSRF(跨站请求伪造)

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/"    }  ]}

测试代码

                
    
地名：{{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的生命周期

Vue实例有一个完整的生命周期，也就是从开始创建初女台化数据、编译模板、挂载DOM、渲染一更新一渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册JS方法，可以让我们用自己注册的JS方法控制整个大局，在这些事件响应方法中的this直接指向的是Vue的实例。

关于"Vue Axios的异步通信怎么实现"这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对"Vue Axios的异步通信怎么实现"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。