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
Note: This is the first article of a series of articles
Getting Started
Quick Start
Observables are like data or event generators with logic stored inside.
The data they generate can have various of sources like array of values, dom events, timers etc.
Anything you want can turned to be an observable
Let’s say we have an observable, now we need to start executing somehow to generate the data.
Coding Example
Observables are having $ sign at the end of their name as the naming practice, this way we can easily identify which variable is actually observable
First let’s see the functions we will use.
external.ts
import { Observable, of } from "rxjs";
export const name$ = of('Alice', 'Ben', 'Charlie');
export function storeDataOnServer(data: string): Observable<string> {
return new Observable(subscriber => {
setTimeout(() => {
subscriber.next(`Saved successfully: ${data}`);
subscriber.complete();
}, 5000);
});
}
export function storeDataOnServerError(data: string): Observable<string> {
return new Observable(subscriber => {
setTimeout(() => {
subscriber.error(new Error('Failure!'));
}, 5000);
});
}
We can think observable like a function, when we call it, it emits some values.
index.ts
import { name$, storeDataOnServer, storeDataOnServerError } from './external';
name$.subscribe();
Here it probably emitted some data but because of we don’t have a handler we couldn’t catch it
import { name$, storeDataOnServer, storeDataOnServerError } from './external';
name$.subscribe((value) => console.log(value));
// Mike
// Brandon
// Alice
We can for example write a function that simulates data fetch from a remote server
storeDataOnServer('Some value').subscribe((value) => console.log(value));
We also have a version that acts like we are throwing an error
storeDataOnServerError('Some value').subscribe((value) => console.log(value));
This will fail our javascript since we didn’t handle the error .
For error handling in observables we have 2 versions
First the deprecated version (still a lot of projects written like this)
storeDataOnServerError('Some value').subscribe(
(value) => console.log(value),
(err) => console.log('Error when saving:', err.message)
);
And the modern version the observable object
storeDataOnServerError('Some value').subscribe({
next: (value) => console.log(value),
error: (err) => console.log('Error when saving:', err.message),
});
The whole code:
import { name$, storeDataOnServer, storeDataOnServerError } from './external';
// name$.subscribe((value) => console.log(value));
// storeDataOnServer('Some value').subscribe((value) => console.log(value));
// storeDataOnServerError('Some value').subscribe((value) => console.log(value));
// storeDataOnServerError('Some value').subscribe(
// (value) => console.log(value),
// (err) => console.log('Error when saving:', err.message)
// );
storeDataOnServerError('Some value').subscribe({
next: (value) => console.log(value),
error: (err) => console.log('Error when saving:', err.message),
});
What Next?
This is the first article of a series of articles I write about RxJS. Do not stop here! Continue reading.
See the second article
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)