【React】React学习笔记三：React 请求处理
学习视频链接
一、理解
1.常用的ajax请求库
（1）jQuery: 比较重, 如果需要另外引入不建议使用
（2）axios: 轻量级, 建议使用
- 封装XmlHttpRequest对象的ajax
- promise风格
- 可以用在浏览器端和node服务器端
2.axios
https://github.com/axios/axios
GET请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});
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用户搜索案例
请求地址: https://api.github.com/search/users?q=xxxxxx
List组件结构
（render()中）
const {
users,isFirst,isLoading,err} = this.props
return (
<div className="row">
{
isFirst ? <h2>欢迎使用，输入关键字，随后点击搜索</h2> :
isLoading ? <h2>Loading......</h2> :
err ? <h2 style={
{
color:'red'}}>{
err}</h2> :
users.map((userObj)=>{
return (
<div key={
userObj.id} className="card">
<a rel="noreferrer" href={
userObj.html_url} target="_blank">
<img alt="head_portrait" src={
userObj.avatar_url} style={
{
width:'100px'}}/>
</a>
<p className="card-text">{
userObj.login}</p>
</div>
)
})
}
</div>
)
- 注意三目运算符
2.搜索栏组件
render() {
return (
<section className="jumbotron">
<h3 className="jumbotron-heading">搜索github用户</h3>
<div>
<input ref={
c => this.keyWordElement = c} type="text" placeholder="输入关键词点击搜索"/>
<button onClick={
this.search}>搜索</button>
</div>
</section>
)
}
search中请求数据，并更新数据（state），然后将users传给子组件：
search = ()=>{
//获取用户的输入(连续解构赋值+重命名)
const {
keyWordElement:{
value:keyWord}} = this
//发送请求前通知App更新状态
this.props.updateAppState({
isFirst:false,isLoading:true})
//发送网络请求
axios.get(`/api1/search/users?q=${
keyWord}`).then(
response => {
//请求成功后通知App更新状态
this.props.updateAppState({
isLoading:false,users:response.data.items})
},
error => {
//请求失败后通知App更新状态
this.props.updateAppState({
isLoading:false,err:error.message})
}
)
}
三、消息订阅-发布机制
理解：组件间数据的传递方式
- props，一层一层传递
- 消息的发布订阅，当嵌套层数比较多，可以用此工具库
1.工具库: PubSubJS
下载:
npm install pubsub-js --save
使用:
import PubSub from 'pubsub-js' //引入
PubSub.subscribe('delete', function(data){
}); //订阅
PubSub.publish('delete', data) //发布消息
3.上一个案例的实现
Search发布消息
search = ()=>{
//获取用户的输入(连续解构赋值+重命名)
const {
keyWordElement:{
value:keyWord}} = this
//发送请求前通知List更新状态
PubSub.publish('atguigu',{
isFirst:false,isLoading:true})
//发送网络请求
axios.get(`/api1/search/users?q=${
keyWord}`).then(
response => {
//请求成功后通知List更新状态
PubSub.publish('atguigu',{
isLoading:false,users:response.data.items})
},
error => {
//请求失败后通知App更新状态
PubSub.publish('atguigu',{
isLoading:false,err:error.message})
}
)
}
List订阅消息
//页面挂载之后的初始化的事
componentDidMount(){
this.token = PubSub.subscribe('atguigu',(_,stateObj)=>{
this.setState(stateObj)
})
}
四、fetch
1.介绍
- fetch: 原生函数，不再使用XmlHttpRequest对象提交ajax请求（jQuery和axios）
- 设计思想：关注分离
- 老版本浏览器可能不支持
2.相关API
1)GET请求
fetch(url).then(function(response) {
return response.json()
}).then(function(data) {
console.log(data)
}).catch(function(e) {
console.log(e)
});
2)POST请求
fetch(url, {
method: "POST",
body: JSON.stringify(data),
}).then(function(data) {
console.log(data)
}).catch(function(e) {
console.log(e)
})
五、搜索案例知识点
1.设计状态时要考虑全面，例如：带有网络请求的组件，要考虑请求失败怎么办。
2.ES6小知识点：解构赋值+重命名
let obj = {
a:{
b:1}}
const {
a} = obj; //传统解构赋值
const {
a:{
b}} = obj; //连续解构赋值
const {
a:{
b:value}} = obj; //连续解构赋值+重命名
3.消息订阅与发布机制
- 先订阅，再发布（理解：有一种隔空对话的感觉）
- 适用于任意组件间通信
- 要在组件的componentWillUnmount中取消订阅
4.fetch发送请求（关注分离的设计思想）
try {
const response= await fetch(`/api1/search/users2?q=${
keyWord}`)
const data = await response.json()
console.log(data);
} catch (error) {
console.log('请求出错',error);
}