Vue-04-axios异步通信

5.axios异步通信

5.1 什么是Axios

首先需要知道：axios不是一种新的技术。
axios 是一个基于nodejs中的Promise 用于浏览器的 HTTP 客户端的异步通信框架，本质上也是对原生XHR的封装实现ajax异步通信，只不过它是Promise的实现版本，符合最新的ES规范，有以下特点：
- 从浏览器中创建XMLHttpRequests
- 从node.js创建http请求
- 支持Promise API[US中链式编程]
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF(跨站请求伪造)
GitHub:https://github.com/axios/axios 中文文档：http:/www.axios-js.com/
为什么要使用Axios

由于vue.js是一个视图晨框架并且作者（尤雨溪）严格准守SoC(关注度分离原则)，所以vue.js并不包含AJAX的通信功能，为了解决通信问题，作者单独开发了一个名为vue-resource的插件，不过在进入2.0版本以后停止了对该插件的维护并推荐了Axios框架。少用jQuery,因为它操作Dom太频繁！

5.2 第一个Axios应用程序

一般开发的接口大部分都是采用JSON格式，可以先在项目里模拟一段JSON数据，数据内容如下：创建一个名为servicejs.json的文件并填入上面的内容，放在项目的根目录下

{
	"name":"zs",
	"url": "http://baidu.com",
	"address": {
	 "city":"北京"
    },
	"hower":[
		{"option":"java"},
		{"option":"python"},
		{"option":"c++"},
		{"option":"读书"}
	]
}

vue-demo测试页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 解决模板加载数据前显示模板代码问题，第一次刷新不显示内容 -->
		<style>
			[v-cloak]{
				 display: none; 
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<p>{{result.name}}</p>
			<a v-bind:href="result.url">点我链接</a>
			<p>{{result.address.city}}</p>
			<p>{{result.hower}}</p>
			<div v-for="(item,index) in result.hower">
				<input  type="checkbox" name="hower" value="item.option" checked/>
				<label>{{item.option}}</label>
			</div>
		</div>
		
		<script src="static/vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script>
			/* vm对象 */
			const vm = new Vue({
				el: '#app',
				//data: {checkvalues: []}, //属性
				data (){ //data()方法
					return{
						result: { //请求的返回参数必须和请求的json数据一致，可以不写，但不能写错
							'name': '',
							'url': '',
							'address': {
								'city': ''
							},
							'hower': [
			
							]
						}
					}
				},
				mounted (){ //钩子函数
					axios.get('servicejs.json').then(Response=>{
						console.log(Response.data)
					    this.result=Response.data
					} )
				}
			})
		</script>
	</body>
</html>

说明：

1.在这里使用了 v-bind将a:href的属性值与Vue实例中的数据进行绑定
2.使用axios框架的get方法请求AJAX并自动将数据封装进了Vue实例的数据对象中
3.我们在data中的数据结构必须要和Ajax响应回来的数据格式匹配！

5.3 Vue的生命周期

官方文档：https:/cn.vuejs…org/v2/g uide/instance.html#生命周期图示:
Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载DOM、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册JS方法，可以让我们用自己注册的JS方法控制整个大局，在这些事件响应方法中的this直接指向的是Vue的实例。
-这个vue生命周期中的注意点：

实例化Vue对象,没有真正渲染，加载时先出来模板，后渲染数据

编译模板把data对象里的数据和vue语法声明的模板编译成浏览器可读的HTML，data数据dom模板进行绑定

将编译好的HTML替换掉el属性所指向的dom,此时HTML替换实例中的el,数据渲染完毕

将编译完成的HTML挂载到对应虚拟dom时触发的钩子

编译好的HTML挂载到页面后，执行的事件钩此钩子函数中一般会做一些ajax请求获取数据进行数据初始化，（页面加载之前）

注意：mounted在整个实例中只执行一次

实时监控数据变化并随之更新DOM

拆除数据监听，子组件和事件监听