forkjoin rxjs

什么是RxJS？ (What is RxJS?)

Reactive programming is an asynchronous programming paradigm concerned with data streams and the propagation of change - Wikipedia

响应式编程是一种与数据流和变更传播有关的异步编程范式 -Wikipedia

RxJS is a library for reactive programming using observables that makes it easier to compose asynchronous or callback-based code - RxJS docs

RxJS是用于使用可观察对象进行React式编程的库，可以更轻松地编写异步或基于回调的代码-RxJS文档

The essential concepts in RxJS are

RxJS中的基本概念是

• An Observable is a stream of data

  可观察的是数据流

• Observers can register up to 3 callbacks:

  观察者最多可以注册3个回调：

1. next is called 1:M time to push new values to the observer

   下一个称为1：M时间，将新值推送给观察者

2. error is called at most 1 time when an error occurred

   发生错误时最多调用1次错误

3. complete is called at most 1 time on completion

   完成时最多调用1次

• Subscription "kicks off" the observable stream

  订阅 “开始”可观察的流

Without subscribing the stream won't start emitting values. This is what we call a cold observable.

没有订阅 流将不会开始发出值。 这就是我们所谓的冷 观测。

It's similar to subscribing to a newspaper or magazine... you won't start getting them until you subscribe. Then, it creates a 1 to 1 relationship between the producer (observable) and the consumer (observer).

它的 类似于订阅报纸或杂志...直到订阅后，您才能开始获取它们。 然后，它在生产者(可观察)和消费者(观察者)之间创建一对一的关系。

什么是RxJS运算符？ (What are RxJS operators?)

Operators are pure functions that enable a functional programming style of dealing with collections with operations. There are two kinds of operators:

运算符是纯函数，可以使用函数式编程样式来处理带有集合的集合。 运算符有两种：

• Creation operators
  创作运营商
• Pipeable operators: transformation, filtering, rate limiting, flattening
  管道运算符：转换，过滤，速率限制，展平

Subjects are a special type of Observable that allows values to be multicast to many Observers. While plain Observables are unicast (each subscribed Observer owns an independent execution of the Observable), Subjects are multicast. This is what we call a hot observable.

主题是Observable的一种特殊类型，它允许将值多播到许多Observer。 普通的Observable是单播的 (每个订阅的Observer拥有Observable的独立执行)，而Subject是多播的。 这就是我们所谓的热点 观察。

In this article, I will focus on the

zip

,

combineLatest

and

forkJoin

operators. These are RxJS combination operators, which means that they enable us to join information from multiple observables. Order, time, and structure of emitted values are the primary differences among them.

在本文中，我将重点介绍

zip

，

combineLatest

和

forkJoin

运算符。 这些是RxJS组合运算符，这意味着它们使我们能够连接来自多个可观察对象的信息。 发射值的顺序，时间和结构是它们之间的主要区别。

Let's look at each one individually.

让我们分别看看每个。

压缩() (zip())

• zip

  doesn’t start to emit until each inner observable emits at least one value

  在每个内部可观察到的物体发出至少一个值之前，

  zip

  才开始发出

• zip

  emits as long as emitted values can be collected from all inner observables

  只要可以从所有内部观察对象中收集发射的值，

  zip

  就会发射

• zip

  emits values as an array

  zip

  发出值作为数组

Let’s imagine that you are with Mario and Luigi, two of your best friends, at the best Italian restaurant in Rome. Each one of you orders a drink, a pizza, and a dessert. You specify to the waiter to bring the drinks first, then the pizzas, and finally the desserts.

让我们想象一下，您与两个最好的朋友Mario和Luigi在罗马最好的意大利餐厅在一起。 你们每个人都点饮料，比萨饼和甜点。 您可以指定服务员先带饮料，然后带披萨，最后带甜点。

This situation can be represented with 3 different observables, representing the 3 different orders. In this specific situation, the waiter can use the

zip

operator to bring (emit) the different order items by category.

这种情况可以用3个不同的观测值表示，分别表示3个不同的阶数。 在这种特定情况下，服务员可以使用

zip

运算符按类别携带(发出)不同的订单商品。

❗️❗️❗️Warning❗️❗️❗️

❗️❗️❗️警告❗️❗️❗️

If you go back to the same Italian restaurant with your girlfriend, but she doesn’t want to eat, this is what will happen:

如果您和女友回到同一家意大利餐厅，但她不想吃饭，这将发生以下情况：

If the

waiter$

uses the

zip

operator, you will only get your drink!

如果

waiter$

使用

zip

运算符，那么您只会喝酒！

Why?

为什么？

Because, when the

waiter$

emits the drinks, the

girlfriend$

observable is complete and no more value can be collected from it. Hopefully, the

waiter$

can use another operator for us so we don't break up with our girlfriend 😏

因为，当

waiter$

发出饮料时，可观察到的

girlfriend$

已完成，无法从中收集更多的价值。 希望

waiter$

可以为我们使用其他接线员，这样我们就不会与女友分手😏

CombineLatest() (combineLatest())

• combineLatest

  doesn’t start to emit until each inner observable emits at least one value

  在每个内部可观察到的

  combineLatest

  发出至少一个值之前，

  combineLatest

  才开始发出

• When any inner observable emits a value, emit the last emitted value from each
  当任何内部可观察对象发出一个值时，请从每个对象中发出最后一个发出的值

At the exact same restaurant, the smart

waiter$

now decide to use

combineLatest

operator.

在完全相同的餐厅，聪明的

waiter$

现在决定使用

combineLatest

运算符。

❗️❗️❗️Warning❗️❗️❗️

❗️❗️❗️警告❗️❗️❗️

With

combineLatest

, the order of the provided inner observables does matter.

使用

combineLatest

，提供的内部可观察对象的顺序确实很重要。

If

you$

is provided first to

waiter$

, it will emit only one value

["Tiramisu", "Sprite"]

.

如果首先向

waiter$

提供

you$

，它将仅发出一个值

["Tiramisu", "Sprite"]

。

This is happening because

combineLatest

doesn’t start to emit until each inner observable emits at least one value.

girlfriend$

starts emitting when the first inner observable emits its last value. Then,

combineLatest

emits the last values collected from both inner observables.

之所以发生这种情况，是因为直到每个内部可观察对象发出至少一个值之前，

combineLatest

才开始发出。 当第一个内部可观察对象发出其最后一个值时，

girlfriend$

开始发出。 然后，

combineLatest

发出从两个内部可观察值收集的最后一个值。

forkJoin() (forkJoin())

• forkJoin

  emits the last emitted value from each inner observables after they all complete

  forkJoin

  后，他们都完成发射来自各内观测最后发出的值

• forkJoin

  will never emit if one of the observables doesn’t complete

  如果其中一个可观察对象没有完成，

  forkJoin

  将永远不会发出

When you go to the restaurant and order for a pizza, you don’t want to know all the steps about how the pizza is prepared. If the cheese is added before the tomatoes or the opposite. You just want to get your pizza! This is where

forkJoin

comes into play.

当您去餐厅订购披萨时，您不想知道披萨的准备工作的所有步骤。 如果在番茄或相反面之前添加奶酪。 您只想拿披萨！ 这是

forkJoin

发挥作用的地方。

❗️❗️❗️Warning❗️❗️❗️

W️❗️❗️警告❗️❗️❗️

• If one of the inner observables throws an error, all values are lost
  如果内部观察值之一抛出错误，则所有值都将丢失

• forkJoin

  doesn’t complete

  forkJoin

  尚未完成

• If you are only concerned when all inner observables complete successfully, you can catch the error from the outside

  如果仅在所有内部观测值成功完成时才担心，则可以从外部捕获错误

• Then,

  forkJoin

  completes

  然后，

  forkJoin

  完成

• If you don’t care that inner observables complete successfully or not, you must catch errors from every single inner observable
  如果您不关心内部可观测对象是否成功完成，则必须捕获每个内部可观测对象的错误

• Then,

  forkJoin

  completes

  然后，

  forkJoin

  完成

Personally, when I go to a restaurant with friends, I don’t care if one of them receives a burnt pizza. I just want mine 😆 so I will ask the

waiter$

to catch the errors from inner observables individually.

就个人而言，当我和朋友一起去餐馆时，我不在乎其中一个是否收到了烧比萨饼。 我只想要我的😆，所以我将要求

waiter$

分别从内部可观察对象中捕获错误。

结语 (Wrap up)

We covered a lot in this article! Good examples are important to better understand RxJS operators and how to choose them wisely.

我们在本文中介绍了很多内容！ 好的例子对于更好地理解RxJS运算符以及如何明智地选择它们很重要。

For combination operators like

zip

,

combineLatest

, and

forkJoin

the order of inner observables that you provide is also critical, as it can drives you to unexpected behaviours.

对于

zip

，

combineLatest

和

forkJoin

之类的组合运算符，您提供的内部可观察

forkJoin

的顺序也很关键，因为它可以使您趋向于意外行为。

There is much more to cover within RxJS and I will do it in further articles.

RxJS包含更多内容，我将在后续文章中介绍。

I hope you enjoyed this article! 😍

希望您喜欢这篇文章！ 😍

👉 You can follow me on Twitter to get notified about new Angular/RxJS blog posts and cool tips!

👉您可以在Twitter上关注我，以获取有关Angular / RxJS新博客帖子和酷提示的通知！

翻译自: https://www.freecodecamp.org/news/understand-rxjs-operators-by-eating-a-pizza/

forkjoin rxjs