Here are my detailed notes from the fantastic course created by Jurek Wozniak, called RxJS 7 and Observables: Introduction.
In order to understand the concept please consider buying the course yourself, these notes are simply subsidiaries
Exercises: Observable, Observer and Subscription
Teardown, Completion Notification
Let’s say we want to send a complete notification after two seconds, and consume the complete notification that is emitted.
Also we want to make some cleanup when the teardown is happening. How can we do that?
import { Observable } from 'rxjs';
const $observable = new Observable((subscriber) => {
subscriber.next('First');
setTimeout(() => {
subscriber.next('After one sec');
}, 1000);
setTimeout(() => {
subscriber.next('After two sec');
subscriber.complete();
}, 2020);
return () => {
console.log('Teardown');
};
});
const observer = $observable.subscribe({
next: (value) => console.log(value),
complete: () => console.log('Completed'),
});
We see for the first time that when we create a new observable, we can return a function and this function will be called at the teardown process.
This is really handy because in that step we can clean our logic and make the required changes.
Error Notification
This time let’s look at the logic what happens when an error is emitted
import { Observable } from 'rxjs';
const observable$ = new Observable<string>((subscriber) => {
console.log('Observable executed');
subscriber.next('Alice');
subscriber.next('Ben');
setTimeout(() => {
subscriber.next('Charlie');
subscriber.error(new Error('Something went wrong :('));
}, 2000);
return () => {
console.log('Teardown');
};
});
console.log('Before subscribe');
observable$.subscribe({
next: (value) => console.log(value),
complete: () => console.log('Completed'),
error: (err: Error) => console.log(err.message),
});
console.log('After subscribe');
Unsubscribe
Let’s create an interval that emits a value every 2 second and we unsubscribe to it ater 7 seconds, and clean the interval using the teardown function
import { Observable } from "rxjs";
const interval$ = new Observable<number>(subscriber => {
let counter = 1;
const intervalId = setInterval(() => {
console.log('Emitted', counter);
subscriber.next(counter++);
}, 2000);
return () => {
clearInterval(intervalId);
};
});
const subscription = interval$.subscribe(value => console.log(value));
setTimeout(() => {
console.log('Unsubscribe');
subscription.unsubscribe();
}, 7000);
Let's keep in touch
Hey, thanks a lot if you read it so far.
I want you to keep in touch for more sweet content.
Please subscibe in Dev.to and other channels (🦸♂️ especially twitter)
Twitter 🐦 https://twitter.com/barisbll_dev
Linkedin 📎 https://www.linkedin.com/in/barisbll-dev/
Github 👨🏻💻 https://github.com/barisbll
Medium 📰 https://medium.com/@barisbll
Top comments (0)