React请求接口数据

一、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; //连续解构赋值+重命名

四、消息订阅-发布机制

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

订阅消息（接收数据）

发布消息（传递数据）

五、扩展：Fetch（原生）

5.1 文档

5.2. 特点

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

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. 怎么做

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

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

总结：

(5)消息订阅与发布机制
        1.先订阅，再发布（理解：有一种隔空对话的感觉）
        2.适用于任意组件间通信
        3.要在组件的componentWillUnmount中取消订阅
(6)fetch发送请求（关注分离的设计思想）
        try {
                 //把请求到数据马上返回分离：请求结果+数据处理  一个步骤拆成多个步骤：分而治之的逻辑
                const response= await fetch(`/api1/search/users2?q=${keyWord}`)
                const data = await response.json()
                console.log(data);
            } catch (error) {
                console.log('请求出错',error);
            }