Experimenting with Observables
You’ve only dipped your toes into the massive toolbox Rx provides. Read on to learn about operators beyond map and takeUntil. map has worked for everything so far, but what happens when we throw an asynchronous wrench in the works or tackle multiple operations inside?
This section covers the of constructor and the take and delay operators. They’re included in the first chapter, because all three are useful for hands-on experimentation with observables. If you’re not quite sure how an operator works, these tools let you get an easily-understood observable stream up and running to test the confusing operator.
of
The of constructor allows for easy creation of an observable out of a known data source. It takes any number of arguments and returns an observable containing each argument as a separate event. The following example logs the three strings passed in as separate events.
| | import { of } from 'rxjs'; |
| | |
| | of('hello', 'world', '!') |
| | .subscribe(console.log); |
The of constructor can be handy when you try to learn a new operator; it’s the simplest way to create an observable of arbitrary data. For instance, if you’re struggling with the map operator, it may be elucidating to pass a few strings through to see what gets logged.
| | import { of } from 'rxjs'; |
| | |
| | of('foo', 'bar', 'baz') |
| | .pipe( |
| | map(word => word.split('')) |
| | ) |
| | .subscribe(console.log); |
Beyond learning RxJS, the of constructor is used when testing observables, as it allows you to pass in precise data during unit testing.
The take Operator
Earlier in this chapter, you took a look at takeUntil, which continued taking events until the passed-in observable emitted a value. The take operator is related to that, but it simplifies things. It’s passed a single integer argument, and takes that many events from the observable before it unsubscribes.
| | import { interval } from 'rxjs'; |
| | import { take } from 'rxjs/operators'; |
| | |
| | // interval is an infinite observable |
| | interval(1000) |
| | .pipe( |
| | // take transforms that into an observable of only three items |
| | take(3) |
| | ) |
| | // Logs 0, 1, 2 as separate events and then completes |
| | .subscribe(console.log); |
take is useful when you only want the first slice of an observable’s data. In practical terms, this helps in situations where you only want to be notified on the first click on a button, but don’t care about subsequent clicks. Another example is a trivia game where only the first three players to submit an answer get the points.
| | answer$ |
| | .pipe( |
| | filter(isAnswerCorrect), |
| | take(3) |
| | ) |
| | .subscribe(updateScore); |
It’s also helpful to use the take operator in combination with interval when debugging as an easy way to create a finite, asynchronous stream.
The delay Operator
The delay operator is passed an integer argument and delays all events coming through the observable chain by that many milliseconds. This example logs 1, 2, and 3 one second after the code is executed.
| | of(1,2,3) |
| | .pipe( |
| | delay(1000) |
| | ) |
| | .subscribe(console.log); |
Like the other two tools here, delay helps you manipulate your experimental streams to play with observables and their operators. The delay operator is also helpful when connecting multiple streams together (this example uses merge, an operator/constructor combo you’ll learn about in Chapter 2, Manipulating Streams).
| | import { of, merge } from 'rxjs'; |
| | import { delay } from 'rxjs/operators'; |
| | |
| | let oneSecond$ = of('one').pipe(delay(1000)); |
| | let twoSecond$ = of('two').pipe(delay(2000)); |
| | let threeSecond$ = of('three').pipe(delay(3000)); |
| | let fourSecond$ = of('four').pipe(delay(4000)); |
| | |
| | merge( |
| | oneSecond$, |
| | twoSecond$, |
| | threeSecond$, |
| | fourSecond$ |
| | ) |
| | .subscribe(console.log); |
Connecting the Dots
What does this example log, and when?
| | import { interval } from 'rxjs'; |
| | import { take, map, delay} from 'rxjs/operators'; |
| | |
| | interval(1000) |
| | .pipe( |
| | take(5), |
| | map(val => val * 5), |
| | delay(500) |
| | ) |
| | .subscribe(console.log); |
| | Answer: |
| | 1500ms: logs 0 |
| | 2500ms: logs 5 |
| | 3500ms: logs 10 |
| | 4500ms: logs 15 |
| | 5500ms: logs 20 (and finishes) |