【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="输入关键词点击搜索"/>&nbsp;
				<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);
}