发表在

角训练

RxJs观察5分钟

RxJs是一个相当棘手的库。这是因为它带有不同的概念和词汇,看起来可能令人生畏:流、可观察对象、操作符、主题等。

本文将在您的几分钟时间内揭开RxJs的神秘面纱。

什么是RxJs?

RxJs是一个旨在标准化Javascript代码处理异步任务的方式.例如,大多数Javascript库使用回调函数,所以我们可以监听事件,并在这样的事件发生时得到通知,就像Node.JS中的这个例子:

fs.readFile(<目录>,(err, data) => {
//读取目录后运行的代码
})

问题是每个库都有自己的回调格式,没有统一的方法来实现。承诺是这个方向上的第一次尝试,后来发展成了Javascript语言。

RxJs类似于Promises。请继续阅读,了解它们的相同点和不同点。

什么是可观察对象?

可观察对象是可以订阅的对象用于接收数据。它们是使用类注册回调函数的统一方式订阅方法,该方法返回类型的对象订阅

这就是我们前面的例子的样子readFile返回一个Observable对象:

fs.readFile(“<目录>”).subscribe (
(data) => {
//读取目录后运行的代码
},
(err) => {
//当发生错误时运行的代码

);

如您所见,主要的区别在于我们注册了两个回调:一个用于接收数据,另一个用于处理错误。我们甚至可以添加第三个回调函数来在Observable完成时得到通知,这意味着它不会再发出任何数据。

可观察对象通常表示为称为a的时间轴大理石图.每个弹珠(圆)表示正在发射的数据。一条直线表示Observable的完成:

一个Observable的大理石图,它会随着时间的推移发出几个值,从20到100,然后完成

可观察对象和承诺有什么不同?

关键的相似之处:

  • 两者都使用回调函数
  • 两者都用于异步任务和侦听未来将发生的事件。

关键的不同点:

  • Promise只返回一个值。Observable可以(但不一定)在一段时间内返回多个值。
  • 一旦承诺被创建,它就开始“工作”。一个可观察对象开始“工作”,只要它订阅方法。
  • 我们不能取消Promise(它无论如何都会运行),但我们可以取消Observable。

什么是运算符?

运营商可以用来调整Observable行为的函数.例如,filter操作符可用于从Observable中过滤数据:

过滤器操作符对每个发出的值(这里是x > 10)应用检查,并过滤掉任何没有通过检查的值

在RxJs中有超过100个操作符,而像rxmarbles.com很方便了解最有用的方法。

要使用运算符,我们调用a方法,将所有操作符作为参数传递给该方法。管()返回一个我们可以订阅的新可观察对象。这里有一个例子:

可观测的.pipe (
//我们可以在这里链接几个运算符
Map (data => data.name)
.subscribe(name => console.log(name));

要了解更多关于操作符可以做什么的信息和一个很好的例子,请查看本教程:使用RxJs和Angular表单进行动态过滤

Angular认证链接

什么是主题?

主题是一种特殊的可观察对象,它允许我们将数据发送给多个订阅者。换句话说,他们是多播.它们还提供了一个简单的API来向所有订阅者发送数据。

下面是一个例子,我们创建了一个主题,并用它来发射数据:

主题=主题<字符串> ();//我们使用subject来释放数据
subject.next (“尤里卡”);

在Angular中,服务通常使用主题将新数据发送给所有需要该信息的组件。

例如,当我们使用an@Output在组件中,EventEmitter后面的输出是一个RxJs主题!

为了更深入地研究主题,了解不同类型的主题,这里有另一个教程:RxJs主题:教程

结论

RxJs不是一个简单的主题,但是这个库的所有特性都围绕着本文中提出的基本概念展开。如果你想让我在未来介绍任何特定的RxJs主题或挑战,请在评论中告诉我。

我叫betway必威滚球.我是Angular的谷歌开发专家,也是角训练在那里我帮助web开发团队学习并熟悉Angular。

如果您在网页开发方面需要任何帮助,请随时与我们联系!

如果你喜欢这篇文章,请鼓掌或分享。你的帮助我永远感激。你也可以点击此处订阅Medium

使用Medium应用程序

一个写着“在应用商店下载”的按钮,如果点击它将引导你进入iOS应用商店
一个写着“开始吧,谷歌Play”的按钮,如果点击它,就会引导你进入谷歌Play商店
Baidu
map