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":"读书"}
	]
}
1
2
3
4
5
6
7
8
9
10
11
12
13

• vue-demo测试页面

	
		
		
		
		
	
	
		

			
{{result.name}}
			点我链接
			
{{result.address.city}}
			
{{result.hower}}
			

				
				{{item.option}}
			
		
		
		
		
		
	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

• 说明：

  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
• 拆除数据监听，子组件和事件监听

下一篇：Vue-05-计算属性、内容分发、自定义事件