Commit 69188be0 authored by micha's avatar micha
Browse files

progress

parent fd4a82f1
# Combining ongoing Observables - Solution # Combining ongoing Observables - Solution
## Combining ongoing Observables
Combining the http calls with the `combineLatest` operator: Combining the http calls with the `combineLatest` operator:
**Component** **Component**
......
...@@ -2,16 +2,18 @@ ...@@ -2,16 +2,18 @@
This exercise is about combining data coming from multiple HTTP Endpoints into one single set of data. This exercise is about combining data coming from multiple HTTP Endpoints into one single set of data.
Combination operators or creation functions enable us to process emissions Combination operators or creation functions enable us to process emissions
from different `Observables` and transform them into a single emission while keeping the original order of events. from different `Observables` and transform them into a single emission.
The resulting value is an array with the last emitted value of all included Observables.
In this very example we will utilize the `forkJoin` operator. In this very example we will utilize the `forkJoin` operator.
On first sight it is a perfect match for combining HTTP Endpoints since it waits until all On first sight it is a perfect match for combining HTTP Requests since it waits until all
combined operators `complete` before emitting a result. combined operators `complete` before emitting a result.
## Example ## Example
The below example showcases a very simple example using the `forkJoin` operator. We make use of the `of` creation function The below example showcases a very simple case using the `forkJoin` operator.
since it emits and completes instantly. We make use of the `of` creation function (passing a singe value), as its emission pattern is very similar to an HTTP request.
It emits one single value and completes.
```Typescript ```Typescript
import {forkJoin, of} from 'rxjs'; import {forkJoin, of} from 'rxjs';
...@@ -30,6 +32,12 @@ The visual representation of the above example: ...@@ -30,6 +32,12 @@ The visual representation of the above example:
![forkJoin http calls](./assets/images/Reactive-architecture-and-ux-patterns_angular_combination-operators-forkJoin-http_michael-hladky.png) ![forkJoin http calls](./assets/images/Reactive-architecture-and-ux-patterns_angular_combination-operators-forkJoin-http_michael-hladky.png)
The gray boxes at the bottom of the operator scope symbolize a cache which stores the last emitted value of each included Observable.
If any of the sources raises an `error`, it gets forwarded, and the resulting Observable errors.
![forkJoin error](./assets/images/Reactive-architecture-and-ux-patterns_angular_combination-operators-forkJoin-error_michael-hladky.png)
## Gotcha(s)! ## Gotcha(s)!
As stated above, the `forkJoin` creation function waits until every source raises a `complete` event. After that it will return As stated above, the `forkJoin` creation function waits until every source raises a `complete` event. After that it will return
...@@ -43,7 +51,3 @@ As stated above, the `forkJoin` creation function waits until every source raise ...@@ -43,7 +51,3 @@ As stated above, the `forkJoin` creation function waits until every source raise
Here you can see how `forkJoin` will never emit any value, because `a$` does not `complete`. Here you can see how `forkJoin` will never emit any value, because `a$` does not `complete`.
![forkJoin no emission if not all complete](./assets/images/Reactive-architecture-and-ux-patterns_angular_combination-operators-forkJoin-emit-after-all-complete_michael-hladky.png) ![forkJoin no emission if not all complete](./assets/images/Reactive-architecture-and-ux-patterns_angular_combination-operators-forkJoin-emit-after-all-complete_michael-hladky.png)
If any of the sources raises an `error`, the result of `forkJoin` will only be the `error`.
![forkJoin error](./assets/images/Reactive-architecture-and-ux-patterns_angular_combination-operators-forkJoin-error_michael-hladky.png)
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment