一、React ajax

React本身只关注于界面, 并不包含发送ajax请求的代码，前端应用需要通过ajax请求与后台进行交互(json数据)，react应用中需要集成第三方ajax库(或自己封装)

常用的ajax请求库

● jQuery: 比较重, 如果需要另外引入不建议使用
● axios: 轻量级, 建议使用，封装XmlHttpRequest对象的ajax，promise风格，可以用在浏览器端和node服务器端
● fetch: 原生函数, 但老版本浏览器不支持，不再使用XmlHttpRequest对象提交ajax请求，为了兼容低版本的浏览器, 可以引入兼容库fetch.js

二、ajax请求库—axios

相关文档：

https://github.com/axios/axios

相关API

GET请求

//方式1
axios.get('/user?ID=12345')
  	.then(function (response) {
  		  console.log(response.data);
 	 })
  	.catch(function (error) {
   		  console.log(error);
 	 });
//方式2
axios.get('/user', {
    	params: {
    	  ID: 12345
   		}
 	 })
  	 .then(function (response) {
   		  console.log(response);
  	 })
  	 .catch(function (error) {
   		  console.log(error);
  	 });

POST请求

axios.post('/user', {
 		 firstName: 'Fred',
  	 	 lastName: 'Flintstone'
	})
	.then(function (response) {
		 console.log(response);
	})
	.catch(function (error) {
		 console.log(error);
	});

三、案例—github用户搜索

3.1 拆分组件

拆分界面,抽取组件（把一整个静态页面拆分成多个组件）

3.2 实现静态组件

使用组件实现静态页面效果（拆组件，拆样式）

3.3 实现动态组件

难点1：axios 请求接口数据

难点2：三元组连续判断List状态

3.4 总结github用户搜索案例

需要理解的概念有：

(1)拆分组件时，要拆到位，结构、样式都要拆。
(2)组件化编码流程：
    1. 拆分组件: 根据功能抽取组件
    2. 实现静态组件: 使用组件实现静态页面效果
    3. 实现动态组件
        3.1 动态显示初始化数据
            3.1.1 数据类型
            3.1.2 数据名称
            3.1.2 保存在哪个组件?
        3.2 交互(从绑定事件监听开始)
        
(3)设计状态时要考虑全面，例如带有网络请求的组件，要考虑请求失败怎么办。
(4)ES6小知识点：解构赋值+重命名
		let obj = {a:{b:1}}
		const {a} = obj; //传统解构赋值
		const {a:{b}} = obj; //连续解构赋值
		const {a:{b:value}} = obj; //连续解构赋值+重命名

四、消息订阅-发布机制

1、工具库：PubSubJS(组件间传值)
2、下载： npm install pubsub-js --save
3、文档： https://www.npmjs.com/package/pubsub-js
4、使用：
● import PubSub from ‘pubsub-js’ //引入
● PubSub.subscribe(‘delete’, function(data){ }); //订阅
● PubSub.publish(‘delete’, data) //发布消息
订阅消息（接收数据）

发布消息（传递数据）

五、扩展：Fetch（原生）

5.1 文档

1、https://github.github.io/fetch/
2、https://segmentfault.com/a/1190000003810652

5.2. 特点

1、fetch: 原生函数，不再使用XmlHttpRequest对象提交ajax请求
2、老版本浏览器可能不支持

5.3. 相关API

GET请求

fetch(url).then(function(response) { 
   	 return response.json() 
}).then(function(data) {   
   	 console.log(data) 
}).catch(function(e) {  
   	 console.log(e) 
});

POST请求

fetch(url, {   
      method: "POST", 
      body: JSON.stringify(data),
}).then(function(data) { 
      console.log(data) 
}).catch(function(e) { 
      console.log(e)
})

拓展：

关注分离的设计思想：
1. 是什么
关注点指软件的功能或目的。把关注点“分离”，就是将与各个关注点有关的代码集中起来做成独立的模块，与其他代码分离。分离的模块要尽量减少公开的功能数量，与其他模块的关联也要维持在最低的限度。

在设计技法中，有很多模式用于实现关注点分离，其中最具代表性的模式是“模型-视图-控制器”****（MVC）。在编程领域，关注点分离的代表技术是面向切面编程。

2. 为什么
代码的修改通常以关注点为单位。因此，将代码按照关注点进行分离有一下好处。
● 各个关注点互相独立，从而缩小了代码的修改范围，使得代码更易于修改
● 修改带来的影响限制在关注点内，因此代码的质量能够保持稳定
● 因为代码的编写是以关注点为单位进行的，所以能够实现并行开发

3. 怎么做
以关注点为单位创建模块，把不同的功能、不相关的功能分开。比如在“模型-视图-控制器”模式下，业务逻辑、用户显示和输入处理互相分离。

另外，如果一个模块在不同前提下有不同的功能，我们就需要分割该模块，让各个功能独立于状态。一般来讲，一个模块不可以拥有多个功能。

总结：
消息订阅与发布机制
1.先订阅，再发布（理解：有一种隔空对话的感觉）
2.适用于任意组件间通信
3.要在组件的componentWillUnmount中取消订阅

fetch发送请求（关注分离的设计思想）

		try {
		         //把请求到数据马上返回分离：请求结果+数据处理  一个步骤拆成多个步骤：分而治之的逻辑
				const response= await fetch(`/api1/search/users2?q=${keyWord}`)
				const data = await response.json()
				console.log(data);
			} catch (error) {
				console.log('请求出错',error);
			}