React---消息订阅发布机制

半指温柔乐

发布于 2021-04-26 02:10:16

79400

代码可运行

文章被收录于专栏：前端知识分享前端知识分享

运行总次数：0

代码可运行

一、PubSubJS的使用

工具库: PubSubJS
下载: npm install pubsub-js --save
使用:

1) import PubSub from 'pubsub-js' //引入

2) PubSub.subscribe('delete', function(data){ }); //订阅

3) PubSub.publish('delete', data) //发布消息

二、案例

接上一篇github搜索案例改造

1. App.jsx

 1 import React, { Component } from 'react'
 2 import Search from './components/Search'
 3 import List from './components/List'
 4 
 5 export default class App extends Component {
 6     render() {
 7         return (
 8             <div className="container">
 9                 <Search/>
10                 <List/>
11             </div>
12         )
13     }
14 }

2. Search.jsx

 1 import React, { Component } from 'react'
 2 import PubSub from 'pubsub-js'
 3 import axios from 'axios'
 4 
 5 export default class Search extends Component {
 6 
 7     search = ()=>{
 8         //获取用户的输入(连续解构赋值+重命名)
 9         const {keyWordElement:{value:keyWord}} = this
10         //发送请求前通知List更新状态
11         PubSub.publish('msg',{isFirst:false,isLoading:true})
12         //发送网络请求
13         axios.get(`/api1/search/users?q=${keyWord}`).then(
14             response => {
15                 //请求成功后通知List更新状态
16                 PubSub.publish('msg',{isLoading:false,users:response.data.items})
17             },
18             error => {
19                 //请求失败后通知App更新状态
20                 PubSub.publish('msg',{isLoading:false,err:error.message})
21             }
22         )
23     }
24 
25     render() {
26         return (
27             <section className="jumbotron">
28                 <h3 className="jumbotron-heading">搜索github用户</h3>
29                 <div>
30                     <input ref={c => this.keyWordElement = c} type="text" placeholder="输入关键词点击搜索"/>&nbsp;
31                     <button onClick={this.search}>搜索</button>
32                 </div>
33             </section>
34         )
35     }
36 }

3. List.jsx

 1 import React, { Component } from 'react'
 2 import PubSub from 'pubsub-js'
 3 import './index.css'
 4 
 5 export default class List extends Component {
 6 
 7     state = { //初始化状态
 8         users:[], //users初始值为数组
 9         isFirst:true, //是否为第一次打开页面
10         isLoading:false,//标识是否处于加载中
11         err:'',//存储请求相关的错误信息
12     } 
13 
14     componentDidMount(){
15         this.token = PubSub.subscribe('msg',(_,stateObj)=>{
16             this.setState(stateObj)
17         })
18     }
19 
20     componentWillUnmount(){
21         PubSub.unsubscribe(this.token)
22     }
23 
24     render() {
25         const {users,isFirst,isLoading,err} = this.state
26         return (
27             <div className="row">
28                 {
29                     isFirst ? <h2>欢迎使用，输入关键字，随后点击搜索</h2> :
30                     isLoading ? <h2>Loading......</h2> :
31                     err ? <h2 style={{color:'red'}}>{err}</h2> :
32                     users.map((userObj)=>{
33                         return (
34                             <div key={userObj.id} className="card">
35                                 <a rel="noreferrer" href={userObj.html_url} target="_blank">
36                                     <img alt="head_portrait" src={userObj.avatar_url} style={{width:'100px'}}/>
37                                 </a>
38                                 <p className="card-text">{userObj.login}</p>
39                             </div>
40                         )
41                     })
42                 }
43             </div>
44         )
45     }
46 }

三、扩展Fetch

1. 文档

2. 特点

fetch: 原生函数，不再使用XmlHttpRequest对象提交ajax请求
老版本浏览器可能不支持

3. 相关API

1) GET请求

1 fetch(url).then(function(response) {
2     return response.json()
3   }).then(function(data) {
4     console.log(data)
5   }).catch(function(e) {
6     console.log(e)
7   });

1) POST请求

1 fetch(url, {
2     method: "POST",
3     body: JSON.stringify(data),
4   }).then(function(data) {
5     console.log(data)
6   }).catch(function(e) {
7     console.log(e)
8   })