专栏首页小丞前端库React 入门学习(九)-- 消息订阅发布

React 入门学习(九)-- 消息订阅发布

📢 大家好,我是小丞同学,一名大二的前端爱好者 📢 这篇文章是学习 React 中 GitHub 搜索案例的学习笔记 📢 非常感谢你的阅读,不对的地方欢迎指正 🙏 📢 愿你忠于自己,热爱生活

引言

在昨天写的 Github 案例中,我们采用的是 axios 发送请求来获取数据,同时我们需要将数据从 Search 中传入给 App,再由 App 组件再将数据传递给 List 组件,这个过程会显得多此一举。同时我们要将 state 状态存放在 App 组件当中,但是这些 state 状态都是在 List 组件中使用的,在 Search 组件中做的,只是更新这些数据,那这样也会显得很没有必要,我们完全可以将 state 状态存放在 List 组件中,但是这样我们又会遇到技术难题,兄弟组件间的数据通信。那这里我们就学习一下如何利用消息订阅发布来解决兄弟组件间的通信

消息发布订阅

要解决上面的问题,我们可以借助发布订阅的机制,我们可以将 App 文件中的所有状态和方法全部去除,因为本来就不是在 App 组件中直接使用这些方法的,App 组件只是一个中间媒介而已

我们先简单的说一下消息订阅和发布的机制

就拿我们平常订杂志来说,我们和出版社说我们要订一年的足球周刊,那每次有新的足球周刊,它都会寄来给你。

换到代码层面上,我们订阅了一个消息假设为 A,当另一个人发布了 A 消息时,因为我们订阅了消息 A ,那么我们就可以拿到 A 消息,并获取数据

那我们要怎么实现呢?

首先引入 pubsub-js

我们需要先安装这个库

yarn add pubsub-js

引入这个库

import PubSub from 'pubsub-js'

订阅消息

我们通过 subscribe 来订阅消息,它接收两个参数,第一个参数是消息的名称,第二个是消息成功的回调,回调中也接受两个参数,一个是消息名称,一个是返回的数据

PubSub.subscribe('search',(msg,data)=>{
  console.log(msg,data);
})

发布消息

我们采用 publish 来发布消息,用法如下

PubSub.publish('search',{name:'tom',age:18})

有了这些基础,我们可以完善我们昨天写的 GitHub 案例

将数据的更新通过 publish 来传递,例如在发送请求之前,我们需要出现 loading 字样

// 之前的写法
this.props.updateAppState({ isFirst: false, isLoading: true })
// 改为发布订阅方式
PubSub.publish('search',{ isFirst: false, isLoading: true })

这样我们就能成功的在请求之前发送消息,我们只需要在 List 组件中订阅一下这个消息即可,并将返回的数据用于更新状态即可

PubSub.subscribe('search',(msg,stateObj)=>{
  this.setState(stateObj)
})

同时上面的代码会返回一个 token ,这个就类似于定时器的编号的存在,我们可以通过这个 token 值,来取消对应的订阅

通过 unsubscribe 来取消指定的订阅

PubSub.unsubscribe(this.token)

扩展 – Fetch

首先 fetch 也是一种发送请求的方式,它是在 xhr 之外的一种,我们平常用的 Jquery 和 axios 都是封装了 xhr 的第三方库,而 fetch 是官方自带的库,同时它也采用的是 Promise 的方式,大大简化了写法

如何使用呢?

fetch('http://xxx')
  .then(response => response.json())
  .then(json => console.log(json))
  .catch(err => console.log('Request Failed', err)); 

它的使用方法和 axios 非常的类似,都是返回 Promise 对象,但是不同的是, fetch 关注分离,它在第一次请求时,不会直接返回数据,会先返回联系服务器的状态,在第二步中才能够获取到数据

我们需要在第一次 then 中返回 response.json() 因为这个是包含数据的 promise 对象,再调用一次 then 方法即可实现

但是这么多次的调用 then 并不是我们所期望的,相信看过之前生成器的文章的伙伴,已经有了想法。

我们可以利用 asyncawait 配合使用,来简化代码

可以将 await 理解成一个自动执行的 then 方法,这样清晰多了

async function getJSON() {
  let url = 'https://xxx';
  try {
    let response = await fetch(url);
    return await reasponse.json();
  } catch (error) {
    console.log('Request Failed', error);
  }
}

最后关于错误对象的获取可以采用 try...catch 来实现

关于 fetch 的更多内容

强烈推荐阮一峰老师的博文:fetch

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

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

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

    半指温柔乐
  • RocketMQ学习-消息发布和订阅

    前面一篇文章分析了broker的启动过程,浏览了broker的基本功能。接下来的几篇文章,准备按照十分钟入门RocketMQ一文中提到的一系列特性,依次进行学习...

    阿杜
  • 解密传统组件间通信与React组件间通信

    在React中最小的逻辑单元是组件,组件之间如果有耦合关系就会进行通信,本文将会介绍React中的组件通信的不同方式

    前端迷
  • 【快讯】微软送你两个月DataCamp订阅啦!

    微软在去年九月发布了全新的Microsoft Machine Learning Server,整合了旗下的Microsoft R Server以及当前最火的Py...

    用户7652506
  • react组件间的通信

    在使用react过程中,不可避免的需要组件间的数据通信,数据通信一般情况有一下几种情况:

    OECOM
  • 前端资源分享-只为更好前端

    阅读更多 本文在GitHub的地址GitHub Front-end-resources

    WEBING
  • 轻松学会 React 钩子:以 useEffect() 为例

    但是,最近我逐渐体会到 React 钩子(hooks)非常好用,重新认识了 React 这个框架,觉得应该补上关于钩子的部分。

    ruanyf
  • 深入浅出redux知识

    为了防止自己手动调用 store.dispatch ,一般会使用redux的这个 bindActionCreators 方法来自动绑定 dispatch 方法,...

    Qiang
  • 前端资源、交流社区、技术博客等整理总汇

    最近看到这篇前端资源总汇的文章,整理的非常详细,于是搬过来,方便自己后期查阅,侵删。

    德顺
  • Redux的设计模式

    React官方网站是这样形容React的,A JavaScript library for building user interfaces。React实际上是...

    前端达人
  • 前端资源分享——只为更好前端

    一、团队组织 网站说明腾讯 AlloyTeam 团队腾讯Web前端团队,代表作品WebQQ,致力于前端技术的研究ISUX腾讯社交用户体验设计,简称ISUX,腾...

    wangxl
  • GitHub 热点速览 Vol.21:Go 新手起手式,学就完事儿了

    以下内容摘录自微博 @HelloGitHub 的 GitHub Trending,选项标准:新发布 | 实用 | 有趣,根据项目 release 时间分类,发布...

    HelloGitHub
  • React 入门学习(十四)-- redux 基本使用

    在了解了 Antd 组件库之后,我们现在开始学习了 Redux ,在我们之前写的案例当中,例如:todolist 案例,GitHub 搜索案例当中,我们对于状态...

    小丞同学
  • 「源码解析」一文吃透react-redux源码(useMemo经典源码级案例)

    使用过redux的同学都知道,redux作为react公共状态管理工具,配合react-redux可以很好的管理数据,派发更新,更新视图渲染的作用,那么对于 r...

    用户6835371
  • react-02

    用户2337871
  • React Native 学习资源精选仓库

    React Native Awesome汇集了各类react-native学习资料、工具、组件、开源App、资源下载、以及相关新闻等,只求精不求全。 如果你是...

    CrazyCodeBoy
  • 前端技能自检

    前端开发是一个非常特殊的行业,它的历史实际上不是很长,但是知识之繁杂,技术迭代速度之快,是其他技术所不能比拟的。

    grain先森
  • react-redux 源码解析一: Provider做了什么,发布订阅模式实现?

    使用过react的同学都知道,redux作为react公共状态管理容器,配合react-redux可以很好的派发更新,更新视图渲染的作用,那么对于react-r...

    用户6835371
  • 一份传男也传女的 React Native 学习笔记

    这段时间了解了一些前端方面的知识,并且用 React Native 写了一个简易新闻客户端 Demo。

    网罗开发

扫码关注云+社区

领取腾讯云代金券