logo

RxJS Havainnot

RxJS:ssä havainnoitava on funktio, jota käytetään luomaan havainnoija ja liittämään se lähteeseen, josta arvoja odotetaan. Esimerkiksi napsautukset, hiiren tapahtumat DOM-elementistä tai HTTP-pyynnöstä jne. ovat esimerkki havaittavista.

Toisin sanoen voidaan sanoa, että tarkkailija on objekti, jolla on takaisinkutsun toiminnot ja jota kutsutaan, kun havaittavaan on vuorovaikutusta. Esimerkiksi lähde on vuorovaikutuksessa esimerkiksi painikkeen napsautuksella, HTTP pyyntö jne.

Havaittavat kohteet voidaan myös määritellä useiden arvojen laiskaiksi Push-kokoelmiksi. Katsotaanpa yksinkertainen esimerkki ymmärtääksesi, kuinka havainnoitavia tietoja käytetään arvojen työntämiseen.

Katso seuraava esimerkki:

python-tavut merkkijonoon
 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); }); 

Yllä olevassa esimerkissä on havaittava, joka työntää arvot 10, 20, 30 välittömästi ja synkronisesti tilattaessa, mutta arvo 40 työnnetään yhden sekunnin kuluttua tilausmenetelmän kutsusta.

Jos haluat käyttää havaittavaa ja nähdä yllä olevat arvot, sinun on tilattava se. Katso seuraava esimerkki:

 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'); 

Lähtö:

Kun suoritamme yllä olevan ohjelman, saamme seuraavan tuloksen konsolissa:

RxJS Havainnot

Havaittavat ovat funktioiden yleistyksiä

Tiedämme, että havainnot ovat toimintoja, jotka toimivat napsautuksina, hiiren tapahtumina DOM-elementistä tai Http-pyynnöstä jne., mutta havainnot eivät ole kuin EventEmitterit, eivätkä ne ole kuin lupaukset useille arvoille. Joissakin tapauksissa havaittavat kohteet voivat toimia kuten EventEmitterit, nimittäin silloin, kun niitä lähetetään ryhmälähetyksissä RxJS-aiheiden avulla, mutta yleensä ne eivät toimi kuten EventEmitterit.

Havaittavat ovat kuin funktioita, joissa ei ole argumentteja, mutta yleistävät ne salliakseen useita arvoja.

Katsotaanpa esimerkkiä ymmärtääksemme tämän selvästi.

Yksinkertainen esimerkki funktiosta:

 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); 

Lähtö:

happoominaisuudet dbms:ssä

Näet seuraavan tulosteen:

 'Hello World!' 123 'Hello World!' 123 

Kirjoitetaan sama esimerkki, mutta Observablesilla:

 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); }); 

Lähtö:

Näet saman tulosteen kuin yllä:

RxJS Havainnot

Voit nähdä tämän, koska sekä funktiot että havainnot ovat laiskoja laskelmia. Jos et kutsu funktiota, console.log('Hello World!') ei tapahdu. Lisäksi Observablesissa, jos et 'soita' sille tilauksella, console.log('Hello World!') ei tapahdu.

Havaittavan työskentely

Havaittavassa tilassa on kolme vaihetta:

  • Havaintojen luominen
  • Observablesin tilaaminen
  • Havainnon suorittaminen

Havaintojen luominen

On kaksi tapaa luoda havaintoja:

  • Käyttämällä Observable konstruktori -menetelmää
  • Observable create() -menetelmän käyttäminen

Käyttämällä Observable konstruktori -menetelmää

Luodaan havainnoitava käyttämällä observable-konstruktorimenetelmää ja lisätään viesti 'Tämä on ensimmäinen havaittavani' käyttämällä Observablen sisällä olevaa subscriber.next-metodia.

testrx.js tiedosto:

 import { Observable } from 'rxjs'; var observable = new Observable( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); 

Voit myös luoda havaittavan käyttämällä Observable.create() -menetelmää seuraavasti:

 import { Observable } from 'rxjs'; var observer = Observable.create( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); 

Observablesin tilaaminen

Havaittavan kohteen tilaaminen on kuin funktion kutsumista. Se tarjoaa takaisinsoittoja, joihin tiedot toimitetaan.

Voit tilata havaittavan käyttämällä seuraavaa syntaksia:

Syntaksi:

 observable.subscribe(x => console.log(x)); 

Katso yllä oleva esimerkki tilauksesta:

testrx.js-tiedosto:

 import { Observable } from 'rxjs'; var observer = new Observable( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); observer.subscribe(x => console.log(x)); 

Lähtö:

RxJS Havainnot

Toteutetaan havaintoja

Havaittava suoritetaan, kun se tilataan. Tarkkailijassa on yleensä kolme menetelmää, joille ilmoitetaan:

Seuraava(): Tätä menetelmää käytetään arvojen, kuten numeron, merkkijonon, objektin jne. lähettämiseen.

unordered_map c++

saattaa loppuun(): Tämä menetelmä ei lähetä arvoa. Se osoittaa, että havaittava on valmis.

virhe(): Tätä menetelmää käytetään ilmoittamaan virheestä, jos sellainen on.

Katsotaanpa esimerkkiä, jossa olemme luoneet havaittavan kaikilla kolmella ilmoituksella ja suoritamme sen esimerkin:

testrx.js-tiedosto:

 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.')); 

Virhemenetelmä vedetään vain, jos on virhe. Kun suoritat yllä olevan koodin, näet seuraavan tulosteen konsolissa.

Lähtö:

RxJS Havainnot