RxJs Basics Flashcards
What is an observable?
A lazily evaluated computation that may produce zero to possibly infinite values.
When creating an observable with new or Observable.create, what argument do you provide?
A subscriber argument which is a function that is evaluated when the observable is first subscribed to. You can call next, error, or complete in this function.
What callbacks can observers register when subscribing to an observable?
next, for handling new values
error, for handling errors
complete, for handling completion of the observable
What values are emitted by the following observable?
const observable = new Observable((subscriber) => {
subscriber.next("one");
subscriber.next("two");
subscriber.complete();
subscriber.next("three");
subscriber.next("four");
});
“one” and “two”, nothing emits after the call to complete.
What alternative do you have to supplying the subscription object with next, error, and complete functions?
Pass the callbacks as parameters to overloads of the subscribe function, e.g.
observable.subscribe(
value => console.log(value),
null, // null for error callback
() => console.log('completed')
)
Do observables always deliver values asynchronously?
No, they can deliver values synchronously or asynchronously.
When you return a function from the subscriber argument passed to the Observable constructor, what is it used for?
It is run to clean up resources (e.g. timers) when the observable completes.
What is returned when you call subscribe on an observable, and what might you use it for?
A subscription object which has: anunsubscribe method on it that allows the consumer to declare they are done with the observable (as opposed to the producer explicitly calling complete), and a add method which allows you to join observables together.
Is the complete callback called when you call unsubscribe on a subscription?
No, the complete callback is only called when the producer, i.e. the observable, explicitly calls complete.
How can you join multiple subscriptions together so that you can unsubscribe them all at the same time?
By calling add on the subscription object, e.g. subscriptionOne.add(subscriptionTwo)
What is a creation operator?
An operator that lifts a non-observable value or source into an observable, e.g. of(‘my value’)
How would you import the fromEvent creation operator?
import { fromEvent } from ‘rxjs’
How would you create and subscribe to and observable that emits whenever the user clicks anywhere in the document?
import { fromEvent } from ‘rxjs’
const source$ = fromEvent(document, 'click') const sub = source$.subscribe(next => ....)
How would you use the of creation operator to create an observable that will emit “foo”, “bar”, “baz”, in sequence?
import { of } from ‘rxjs’
const source$ = of(“foo”, “bar”, “baz”)
source$.subscribe(next => …)
What other creation operator could you use in place of of(1,2,3,4,5)?
range(1, 5)
What would the output be when the following code is run?
import { of } from 'rxjs'
const source$ = of("foo", "bar", "baz")
source$.subscribe(console.log)
console.log("zap")
“foo”
“bar”
“baz”
“zap”
What is the difference between of([1,2,3]) and from([1,2,3])?
of will emit a single array value, [1,2,3]
from will emit the elements of the array one by one
What does the following code do?
function* hello() {
yield 'Hello';
yield 'World';
};
const x = hello();
from(x).subscribe(console.log);
Creates an iterator by calling the generator function hello. Iterators have a next method on them that returns the yielded values. The rxjs from creation operator can use this iterator to create a stream.
Can the from creation operator take a Promise?
Yes
What does the interval creation operator do?
Emits a incrementing sequence of numbers, starting at zero, at the interval you specify. e.g. interval(1000) emits a number every second.
What does timer(2000) do?
Emits 0 after 2 seconds, then completes.
What does timer(5000, 500) do?
Emits 0 after 5 seconds, then emits numbers in sequence, starting at 1, every half second.
What is a ‘pipeable’ operator?
A function that takes an observable as an input, and returns another observable as an output.
How would you apply the map operator to a observable created by of(1,2,3), without using the pipe method?
map(value => …)(of(1, 2, 3))
Do rxjs pipeable operators modify the input observable?
No, they return a new observable, without altering the input/source observable.
What is a marble diagram?
A visualization of a source input, passed to a pipeable operator (or composition of operators), and the resulting output, e.g.
input$: –1—-2—-3
map(value => value * 2)
output$: –2—-4—-6
