React尚硅谷067-074(axios、fetch、pubsub)

068中小知识点

连续解构赋值+重命名,如：

const {
     keyWordElement:{
     value:keyWord}}=this

ref使用：

search = () => {
    console.log(this.keyWorldElement.value)
}
this.keyWorldElement=c} placeholder="输入关键词点击搜索"/> 
搜索

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

067-068-069-070-github搜索案例

{}，括号里不能写if语句，只能是js表达式，三元表达式

连续使用三元表达式：

isFirst?<h2>第一次进来，欢迎使用</h2>:
 isLoading?<h2>loading......</h2>:
     err?{
      err}:map渲染

不要存错误对象，存err.message

批量传递props {…this.state}

071-消息订阅与发布——pubsub

兄弟间可以传值

//用到订阅和发布的地方都要引入
import PubSub from 'pubsub-js'
//订阅:
componentDidMount() {
      
this.token=PubSub.subscribe('atguigu',(msg,data) => {
      
  this.setState(data)
})
}
//发布:
PubSub.publish('atguigu',{
      name:'tom',age:18})
//取消订阅
componentWillUnmount(){
      
PubSub.unsubscribe(this.token)
}

072-fetch（优化后）

try{
     
    let response = await fetch(`/api1/search/users2?q=${
       keyWord}`);
    let data = await response.json();
    console.log(data,'返回的数据‘')
   }catch(err){
     
   }
//外层需要async

074-对SPA应用的理解

单页面应用，打包后只有一个.html

跳转页面利用路由技术