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);
}
网友评论