0419 react框架67-73 父子之间传值，消息订阅与发布，fetch，promise

github搜索案例相关知识点
1.设计状态时要考虑全面，例如带有网络请求的组件，要考虑请求失败怎么办。
2.ES6小知识点：解构赋值+重命名
let obj = {a:{b:1}}
const {a} = obj; //传统解构赋值
const {a:{b}} = obj; //连续解构赋值
const {a:{b:value}} = obj; //连续解构赋值+重命名
3.消息订阅与发布机制
3-1.先订阅，再发布（理解：有一种隔空对话的感觉）
3-2.适用于任意组件间通信
3-3.要在组件的componentWillUnmount中取消订阅
工具库: PubSubJS，下载: npm install pubsub-js --save
3- 4.使用:
1)import PubSub from ‘pubsub-js’ //引入
2)PubSub.subscribe(‘delete’, function(data){ }); //订阅
3)PubSub.publish(‘delete’, data) //发布消息
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);
				}

总结：1. ctrl+f 查找 全部替换 class->className
2,const {keywordElement:{value}}=this连续的解构赋值

连续解构赋值加重命名

        let  obj={
     a:{
     b:{
     c:1}}}
           let obj2={
     a:{
     b:1}}
           const {
     a:{
     b:{
     c:1}}}=obj
           console.log(c);//1
const{
     a:{
     b:data}}=obj2
console.log(data);//1

3.父子之间传东西用props
子给父传东西也用props，app给子传给一个函数，子调用函数的时候就传给父
4.谁接东西：谁在didmount，willunmount订阅
谁想传东西：谁发布消息
5.发送ajax：
5-1原始 const xhr=new XMLHttpRequest//得复
5-2 jquery //（回调地狱？？)
5-3 axios 是promise//得复习。axios和jquery都是对xhr进行封装，服务器端axios是对http进行封装的，
5-4 fetch（和xhr并列），内置的也是promise风格的，能解决回调地狱。不再使用XmlHttpRequest对象提交ajax请求
6. 什么是回调地狱
在js中我们经常会大量使用异步回调，例如使用ajax请求。代码大量使用了回调函数（将一个函数作为参数传递给另个函数）并且有许多 })结尾的符号，使得代码看起来很混乱。

function a(functionb(){
     
    c(function d(){
     
    
    })
})

7.Promise 对象，Promise本身是同步的，他的then方法和catch方法是异步的
做后端api请求的，异步

var ajax=function(){
     
    return new Promise(function(resolve,reject){
     
        //reject()//调用reject返回失败
    })
    ajax("/xxx").then(()=>{
     
        console.log("成功")//异步执行，放到最后执行

    },
    ()=>{
     
        console.log("失败")//异步执行，放到最后执行
    })
}

另一种写法

var ajax=function(){
     
    return new Promise(function(resolve,reject){
     
        //reject()//调用reject返回失败
        var xhr=new XMLHttpRequest();
        xhr.open("Get",url);
        xhr.οnlοad=function (event){
     
resolve()
        };
        xhr.οnerrοr=function(event){
     
reject()
        };
        xhr.send();
    })

    var loading=true;
    ajax("/xxx").then((res)=>{
     
        console.log(res)
}).catch(()=>{
     
    console.log("失败")
}).finally(()=>{
     
    console.log("完成")
    loading=false
})
}

8…then可以链式调用
9.async_await
await右边写promise实例，await只能收到成功的结果
await要写在async里面
10.将回调函数作为函数参数：$.get,setTimeout