RxJS - 入门(15 部分系列)
文章平均质量分 72
xJS 是一个用于使用可观察序列编写异步和基于事件的程序的库。所以 RxJS 和响应式编程并不能解决你所有的问题,但在异步和事件是明星的情况下,它们是很好的解决方案。我更愿意澄清这一点,因为有时程序员相信,但在引入响应式编程之后,他们会遇到其他问题,因为库和范例非常简单,但同时如果你不这样做很容易受
Q shen
分享
展开
-
8. RxJS - 连接运算符
重要的是要记住,当我们使用这个操作符时,observables 一个接一个地运行,所以操作符执行第一个 observable 直到它没有完成,然后它传递给第二个 observable,依此类推。将源 Observable 与其他 Observable 组合以创建一个 Observable,其值仅在源发出时根据每个 Observable 的最新值计算得出。它的工作是将 Observable 的 Observable 转换为值数组,其中该数组的每一项都是一个 Observable 的值。原创 2023-06-02 16:07:06 · 44 阅读 · 0 评论 -
7. RxJS - 转换运算符
您可以从前面的示例中注意到值 0,1 和 2 在第一个 concatMap (0) 的结果之前发出,之后,您可以注意到值 3 和 4 在第二个发出的结果之前发出价值。可以想象,在某些情况下这种行为可能是错误的或意外的,因此,如果您需要使用 mergeMap 运算符,请记住我之前所说的并问问自己它是否会产生一些副作用或者它是否是正确的解决方案你的问题。例如,它可用于搜索自动完成输入的数据。这些运算符与其他运算符相似,但它们有一些最小的差异会改变它们的行为,如果您选择了错误的实现,您可能不会得到方面的结果。原创 2023-06-02 16:02:44 · 46 阅读 · 0 评论 -
14. RxJS - 主题
如果你需要向你的消费者隐藏你的 Observable 是一个 Subject,你需要使用它的“asObservable”方法来暴露这个 subject。这意味着您可以创建一个 Subject,用不定式观察者订阅它,以出色的性能多播值,使用一个称为 的简单方法发出新值,使用一个称为 的方法发出错误并使用一个称为 的简单方法完成您next的error主题complete。ReplaySubject 是一个不需要初始值的主题,但当观察者订阅它时,它会立即接收所有已经发出的值,然后等待未来的值。原创 2023-06-02 16:26:35 · 46 阅读 · 0 评论 -
15. RxJS - 大理石测试
如果您对任何测试框架有信心,那么此代码是特别的,因为在此函数中我们已经指出了测试的期望,但我们还没有编写一个。此参数是一个对象,其中的字段对应于弹珠字符串中传递的值,因此如果您在弹珠字符串中使用 a、b 和 c,则必须使用 a、b 和 c 作为参数的字段。测试 observable 时的另一个重要概念是时间,在这些情况下,可以指定 observable 在多长时间后发出一个值或在多长时间后期望一个值。但在我放手之前,不幸的是我有一个坏消息,这是该系列的最后一篇文章,所以今天会有一些特别的问候。原创 2023-06-03 12:48:25 · 55 阅读 · 0 评论 -
13. RxJS - 自定义运算符
使用“管道”函数,您可以创建一个新函数作为新运算符,并在该函数内创建运算符的逻辑。如您所见,我们可以使用 Observable 构造函数创建一个新的运算符并管理我们的逻辑所需的所有行为。在 95% 的情况下,您可以使用此方法解决问题并创建一个新的操作员,而在 5% 的情况下,您可以从头开始创建一个新的操作员,而不是通过此方法管理。在许多文章中我已经说明了 RxJS 库中已经包含的不同类型的运算符之后,今天我向您展示如何创建自己的运算符。下面是从头开始创建的延迟运算符的示例。原创 2023-06-02 16:21:14 · 69 阅读 · 0 评论 -
12. RxJS - 多播运算符
这些选项可以使用一个简单的布尔值来启用或禁用行为,或者我们可以传递一个通知器工厂,该工厂返回一个可观察到的对象,该对象允许对重置的方式和时间进行更细粒度的控制。这意味着第一个订阅启动了 observable,所有订阅这个 observable 的下一个订阅不会运行一个新的 observable 实例,但它们接收到与第一个订阅相同的值,因此丢失了它们订阅之前发出的所有先前值。在某些情况下,当我们在多个观察者之间共享值时,如果观察者订阅了一个已经启动的可观察对象,我们还需要重放所有先前已经发出的值。原创 2023-06-02 16:19:23 · 72 阅读 · 0 评论 -
11. RxJS - 错误处理运算符
如果源 Observable 调用错误,此方法会将导致错误的 Throwable 发射到从通知程序返回的 Observable。此运算符用于在引发错误时重试可观察对象的执行。如果在执行过程中,可观察对象引发的错误数大于指定值,则重试运算符不再尝试,而是退出并引发错误。我们工作中的最佳实践之一是处理错误,所以今天我将向您展示 RxJS 中的一些运算符来处理错误。通过返回新的可观察对象或抛出错误来捕获要处理的可观察对象的错误。此运算符用于重试可观察对象的执行,它允许我们指示重试的策略。原创 2023-06-02 16:17:41 · 76 阅读 · 0 评论 -
10. RxJS - 条件和数学运算符
Min 运算符对发出数字(或可以与提供的函数进行比较的项目)的 Observable 进行操作,并且当源 Observable 完成时它会发出单个项目:具有最小值的项目。Max 运算符对发出数字(或可以与提供的函数进行比较的项目)的 Observable 进行操作,当源 Observable 完成时,它会发出单个项目:具有最大值的项目。重要的是要记住,当运算符找到一个与我们的条件匹配的值时,它就完成了 observable。仅发出满足某些条件的源 Observable 发出的第一个值的索引。原创 2023-06-02 16:15:29 · 49 阅读 · 0 评论 -
9. RxJS - 效用运算符
此运算符检查可观察对象的执行时间,如果值未在超时时间内发出,运算符将抛出错误。如果你喜欢我的文章,记得关注获取更多的信息。通过给定的超时或直到给定的日期延迟从源 Observable 发射项目。此运算符转换一个数组中的一系列值,其中数组的所有项都是按顺序发出的值。这个运算符在调试期间很有用,或者如果我们需要有关值的时间发射的信息。如果 Observable 在给定的时间跨度内没有发出值,则会出错。此运算符用于将时间戳附加到每个发出的项目。时间戳指示发出值的时间。好的,伙计们,来自公用事业运营商的就是全部。原创 2023-06-02 16:08:49 · 35 阅读 · 0 评论 -
6. RxJS - 过滤运算符
该运算符采用我们指示的最后 x 个项目,如果我们编写 takeLast(1) 运算符将采用最后一个值,如果我们编写 takeLast(3) 运算符将采用最后三个值,依此类推。返回一个 Observable,它发出源 Observable 发出的所有项目,这些项目与前一个项目相比是不同的,使用通过提供的键访问的属性来检查这两个项目是否不同。如您所见,此运算符会跳过我们指示的前 x 个项目,如果我们编写skip(1)运算符会跳过第一个值,如果我们编写skip(2)运算符会跳过前两个值,依此类推。原创 2023-06-02 15:54:19 · 37 阅读 · 0 评论 -
5. RxJS - 创建运算符
接受 ObservableInput 的数组或 ObservableInput 的字典对象,并返回一个 Observable,该 Observable 发出与传递的数组顺序完全相同的值数组,或与传递的字典形状相同的值字典。合并运算符类似于连接运算符,不同之处在于合并运算符以并发模式运行所有可观察对象,因此,在这种情况下,所有可观察对象一起开始,每次可观察对象发出一个值时,合并运算符都会发出最后一个值。这个运算符是特殊的,它发出第一个发出第一个值的可观察对象。它们分为创建操作员和加入创建操作员。原创 2023-06-02 15:44:40 · 56 阅读 · 0 评论 -
4. RxJS - 大理石图
要构建 Marble 图,您需要牢记一些简单的规则:始终有一个时间线表示源可观察对象,有 N 个时间线,您需要显示多少运算符,每个时间线都说明执行后值的状态时间线中指示的运算符,最后,您需要使用圆圈来表示值。为了表示这种情况,大理石图有 3 条时间线,一条是源,一条是地图运算符,一条是延迟运算符。在第一个时间轴中,您可以看到源何时发出值,在第二个时间轴中,您可以看到执行映射运算符后的转换结果。如果你喜欢我的文章,记得关注获取更多的信息。正如您所注意到的,图中有两条时间线,一条用于源,另一条用于地图操作员。原创 2023-06-02 15:37:15 · 35 阅读 · 0 评论 -
3.RxJS - 运营商
最常见的创建运算符是:ajax、empty、from、fromEvent、interval、of、throwError、timer、combineLatest、concat、forkJoin、merge 和 zip。这些运算符的主要范围是:转换、过滤和处理输入可观察对象。管道运算符按范围划分,范围是:转换、过滤、连接、多播、错误处理、实用程序、条件和布尔值以及数学和聚合。在下一篇文章中我会深入介绍这些类型的运算符,今天我只是对运算符的类型做一个概述。创建运算符是简单的函数,它们的范围是创建新的可观察对象。原创 2023-06-02 15:35:24 · 38 阅读 · 0 评论 -
2. RxJS - 观察者和订阅者
在某些情况下,当您调用取消订阅方法时,您需要在您的可观察对象中运行一些特殊代码:RxJS 让我们在可观察对象声明中使用特殊语法来执行此操作。观察者是价值的消费者。此方法允许您在一个订阅实例中收集更多订阅,之后,您可以一次取消订阅所有订阅。RxJS 中的订阅是一个使用“订阅”方法创建的对象,它有一个主要方法:“取消订阅”;在下一篇文章中,我们将看到 RxJS 的最后一个基础:运算符,稍后,我们可以移动到这个库的功能。在您的代码中没有订阅可观察对象之前,什么都不会发生,但是一旦您创建订阅,魔法就会开始。原创 2023-06-02 15:32:05 · 141 阅读 · 0 评论 -
1. RxJS - 可观察
所以 RxJS 和响应式编程并不能解决你所有的问题,但在异步和事件是明星的情况下,它们是很好的解决方案。我更愿意澄清这一点,因为有时程序员相信,但在引入响应式编程之后,他们会遇到其他问题,因为库和范例非常简单,但同时如果你不这样做很容易受伤知道它是如何工作的。不幸的是,这段代码背后的问题是开发人员在没有 RxJS 库和响应式编程基础知识的情况下开始使用角度框架。关于该系列的最后信息:代码是用 Typescript 编写的,但如果您愿意,也可以在普通 javascript 中使用 RxJS。原创 2023-06-02 15:28:04 · 41 阅读 · 0 评论