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的完成:
可观察对象和承诺有什么不同?
关键的相似之处:
- 两者都使用回调函数
- 两者都用于异步任务和侦听未来将发生的事件。
关键的不同点:
- Promise只返回一个值。Observable可以(但不一定)在一段时间内返回多个值。
- 一旦承诺被创建,它就开始“工作”。一个可观察对象开始“工作”,只要它订阅方法。
- 我们不能取消Promise(它无论如何都会运行),但我们可以取消Observable。
什么是运算符?
运营商可以用来调整Observable行为的函数.例如,filter操作符可用于从Observable中过滤数据:
在RxJs中有超过100个操作符,而像rxmarbles.com很方便了解最有用的方法。
要使用运算符,我们调用a管方法,将所有操作符作为参数传递给该方法。管()返回一个我们可以订阅的新可观察对象。这里有一个例子:
可观测的.pipe (
//我们可以在这里链接几个运算符
Map (data => data.name)
).subscribe(name => console.log(name));
要了解更多关于操作符可以做什么的信息和一个很好的例子,请查看本教程:使用RxJs和Angular表单进行动态过滤
什么是主题?
主题是一种特殊的可观察对象,它允许我们将数据发送给多个订阅者。换句话说,他们是多播.它们还提供了一个简单的API来向所有订阅者发送数据。
下面是一个例子,我们创建了一个主题,并用它来发射数据:
让主题=新主题<字符串> ();//我们使用subject来释放数据
subject.next (“尤里卡”);
在Angular中,服务通常使用主题将新数据发送给所有需要该信息的组件。
例如,当我们使用an@Output在组件中,EventEmitter后面的输出是一个RxJs主题!
为了更深入地研究主题,了解不同类型的主题,这里有另一个教程:RxJs主题:教程.
结论
RxJs不是一个简单的主题,但是这个库的所有特性都围绕着本文中提出的基本概念展开。如果你想让我在未来介绍任何特定的RxJs主题或挑战,请在评论中告诉我。
我叫betway必威滚球.我是Angular的谷歌开发专家,也是角训练在那里我帮助web开发团队学习并熟悉Angular。
如果您在网页开发方面需要任何帮助,请随时与我们联系!
如果你喜欢这篇文章,请鼓掌或分享。你的帮助我永远感激。你也可以点击此处订阅Medium.