In RxJS is een waarneembare functie een functie die wordt gebruikt om een waarnemer te creëren en deze te koppelen aan de bron waar waarden van worden verwacht. Klikken, muisgebeurtenissen van een DOM-element of een Http-verzoek, enz. zijn bijvoorbeeld het voorbeeld van waarneembaar.
Met andere woorden, je kunt zeggen dat waarnemer een object is met callback-functies, dat wordt aangeroepen wanneer er interactie is met het waarneembare. De bron heeft bijvoorbeeld interactie gehad door bijvoorbeeld op een knop te klikken, Http verzoek, enz.
Waarneembare waarden kunnen ook worden gedefinieerd als luie Push-verzamelingen van meerdere waarden. Laten we een eenvoudig voorbeeld bekijken om te begrijpen hoe waarneembare waarden worden gebruikt om de waarden te pushen.
Zie het volgende voorbeeld:
import { Observable } from 'rxjs'; const observable = new Observable(subscriber => { subscriber.next(10); subscriber.next(20); subscriber.next(30); setTimeout(() => { subscriber.next(40); subscriber.complete(); }, 1000); }); In het bovenstaande voorbeeld is er een waarneembaar systeem dat de waarden 10, 20, 30 onmiddellijk en synchroon pusht wanneer er wordt geabonneerd, maar de waarde 40 zal worden gepusht na één seconde sinds de abonneemethode heeft aangeroepen.
Als je het waarneembare wilt oproepen en de bovenstaande waarden wilt zien, moet je je daarop abonneren. Zie het volgende voorbeeld:
import { Observable } from 'rxjs'; const observable = new Observable(subscriber => { subscriber.next(10); subscriber.next(20); subscriber.next(30); setTimeout(() => { subscriber.next(40); subscriber.complete(); }, 1000); }); console.log('These are the values just before subscribe'); observable.subscribe({ next(x) { console.log('We have got value ' + x); }, error(err) { console.error('something wrong occurred: ' + err); }, complete() { console.log('Done successfully'); } }); console.log('This value is just after subscribe'); Uitgang:
Wanneer we het bovenstaande programma uitvoeren, krijgen we het volgende resultaat op de console:
Waarneembare waarden zijn generalisaties van functies
We weten dat observables functies zijn die fungeren als klikken, muisgebeurtenissen van een DOM-element of een Http-verzoek, enz., maar observables zijn niet zoals EventEmitters, en ook niet als Promises voor meerdere waarden. In sommige gevallen kunnen waarneembare objecten zich gedragen als EventEmitters, namelijk wanneer ze worden gemulticast met behulp van RxJS-onderwerpen, maar meestal gedragen ze zich niet als EventEmitters.
Waarneembare waarden lijken op functies met nulargumenten, maar generaliseren deze om meerdere waarden toe te staan.
Laten we een voorbeeld bekijken om dit duidelijk te begrijpen.
Een eenvoudig voorbeeld van een functie:
function foo() { console.log('Hello World!'); return 123; } const x = foo.call(); // same as foo() console.log(x); const y = foo.call(); // same as foo() console.log(y); Uitgang:
U ziet de volgende uitvoer:
'Hello World!' 123 'Hello World!' 123
Laten we hetzelfde voorbeeld schrijven, maar met Observables:
import { Observable } from 'rxjs'; const foo = new Observable(subscriber => { console.log('Hello World!'); subscriber.next(123); }); foo.subscribe(x => { console.log(x); }); foo.subscribe(y => { console.log(y); }); Uitgang:
U ziet dezelfde uitvoer als hierboven:
Je kunt dit zien omdat zowel functies als Observables luie berekeningen zijn. Als u de functie niet aanroept, zal console.log('Hello World!') niet plaatsvinden. Bovendien zal bij Observables de console.log('Hello World!') niet plaatsvinden als je het niet 'roept' met abonneren.
Werking van een waarneembaar
Er zijn drie fasen in een waarneembare:
- Waarneembare waarnemingen creëren
- Abonneren op Observables
- Waarnemingen uitvoeren
Waarneembare waarnemingen creëren
Er zijn twee manieren om waarneembare gegevens te creëren:
- Met behulp van de Observable constructor-methode
- Met behulp van de Observable create()-methode
Met behulp van de Observable constructor-methode
Laten we een observable maken met behulp van de observable constructor-methode en een bericht toevoegen: 'Dit is mijn eerste observable' met behulp van de abonnee.next-methode die beschikbaar is in Observable.
testrx.js-bestand:
import { Observable } from 'rxjs'; var observable = new Observable( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); U kunt Observable ook als volgt maken met de methode Observable.create():
import { Observable } from 'rxjs'; var observer = Observable.create( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); Abonneren op Observables
Het abonneren op een waarneembare is hetzelfde als het aanroepen van een functie. Het biedt callbacks waar de gegevens naartoe worden afgeleverd.
U kunt zich abonneren op een waarneembare met behulp van de volgende syntaxis:
Syntaxis:
observable.subscribe(x => console.log(x));
Zie het bovenstaande voorbeeld met abonneren:
testrx.js-bestand:
import { Observable } from 'rxjs'; var observer = new Observable( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); observer.subscribe(x => console.log(x)); Uitgang:
Waarnemingen uitvoeren
Een waarneembare wordt uitgevoerd wanneer erop wordt ingeschreven. Er zijn over het algemeen drie methoden bij een waarnemer die op de hoogte worden gesteld:
volgende(): Deze methode wordt gebruikt om waarden zoals een getal, string, object etc. te verzenden.
compleet(): Deze methode verzendt geen waarde. Het geeft aan dat het waarneembare voltooid is.
fout(): Deze methode wordt gebruikt om eventuele fouten te melden.
Laten we een voorbeeld bekijken waarin we het waarneembare hebben gemaakt met alle drie de meldingen en dat voorbeeld uitvoeren:
testrx.js-bestand:
Mia Khalifa-leeftijd
import { Observable } from 'rxjs'; var observer = new Observable( function subscribe(subscriber) { try { subscriber.next('This is my first Observable'); subscriber.next('Testing Observable'); subscriber.complete(); } catch(e){ subscriber.error(e); } } ); observer.subscribe(x => console.log(x), (e)=>console.log(e), ()=>console.log('Observable is completed now.')); De foutmethode wordt alleen aangeroepen als er een fout is. Wanneer u de bovenstaande code uitvoert, ziet u de volgende uitvoer in de console.
Uitgang:
