2021-6-25 React复习 组件之间的通信2

消息订阅与发布机制：
PubSub。不仅适用于兄弟间的通信，而且适用于任意组件的通信。

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})
			}
		)
	}

componentDidMount(){
		this.token = PubSub.subscribe('atguigu',(_,stateObj)=>{
			this.setState(stateObj)
		})
	}

	componentWillUnmount(){
		PubSub.unsubscribe(this.token)
	}

fetch通信：了解
axios和jQuery是基于xhr的进行ajax请求，axios是promise形式的。
fetch：是原生函数，不再使用XMLHttpRequest对象提交ajax请求，也是promise形式。

.then 方法默认返回的也是一个promiseA实例，当成功的回调或者失败的回调返回的也是一个promiseB对象时，那么这个promiseB对象就会成为新 promise A的结果，它的状态就是promiseA的状态。如果这两个回调函数返回的非promise对象得值C或者返回undefined，那么promiseA的状态为resolved，且值为C或者undefined。。因此在下面的代码，第一个失败的回调时，需要返回一个全新的promise值，否则返回的时undefined，也会走下一步成功的回调，输出获取数据成功了。返回新的promise对象之后新对象的状态是pending，中断promise链。

/* fetch(`/api1/search/users2?q=${keyWord}`).then(
			response => {
				console.log('联系服务器成功了');
				return response.json()
			},
			error => {
				console.log('联系服务器失败了',error);
	
				return new Promise(()=>{})
			}
		).then(
			response => {console.log('获取数据成功了',response);},
			error => {console.log('获取数据失败了',error);}
		) */

改进：
await 只能等到promise成功的回调返回的值，并且成功的回调的返回值也是一个promise对象。并且下面response.json
返回值也是一个promise对象。通过try catch 对错误信息统一处理。

try {
			const response= await fetch(`/api1/search/users2?q=${keyWord}`)
			const data = await response.json()
			console.log(data);
			PubSub.publish('atguigu',{isLoading:false,users:data.items})
		} catch (error) {
			console.log('请求出错',error);
			PubSub.publish('atguigu',{isLoading:false,err:error.message})
		}