RxJS stebimasis yra funkcija, naudojama sukurti stebėtoją ir prijungti jį prie šaltinio, iš kurio tikimasi verčių. Pavyzdžiui, paspaudimai, pelės įvykiai iš DOM elemento arba HTTP užklausa ir kt. yra stebėjimo pavyzdys.
Kitaip tariant, galima sakyti, kad stebėtojas yra objektas su atgalinio skambučio funkcijomis, kuris iškviečiamas, kai yra sąveika su stebimu. Pavyzdžiui, šaltinis sąveikavo su pavyzdžiu, mygtuko paspaudimu, Http prašymas ir kt.
Stebimi objektai taip pat gali būti apibrėžti kaip tingūs kelių reikšmių rinkiniai. Pažiūrėkime paprastą pavyzdį, kad suprastume, kaip stebimi duomenys naudojami reikšmėms perkelti.
Žiūrėkite šį pavyzdį:
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); }); Aukščiau pateiktame pavyzdyje yra stebimas elementas, kuris iškart ir sinchroniškai stumia reikšmes 10, 20, 30, kai užsiprenumeruojate, tačiau reikšmė 40 bus nustumta po vienos sekundės nuo tada, kai iškviečiamas prenumeratos metodas.
Jei norite iškviesti stebimą ir pamatyti aukščiau nurodytas reikšmes, turite ją užsiprenumeruoti. Žiūrėkite šį pavyzdį:
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'); Išvestis:
Vykdydami aukščiau pateiktą programą, konsolėje gausime tokį rezultatą:
Stebimi dalykai yra funkcijų apibendrinimai
Žinome, kad stebimi objektai yra funkcijos, veikiančios kaip paspaudimai, pelės įvykiai iš DOM elemento arba HTTP užklausa ir t. t., tačiau stebimi objektai nėra kaip įvykių skleidžiantys objektai ir kelių verčių pažadai. Kai kuriais atvejais stebimi objektai gali veikti kaip EventEmitters, būtent kai jie perduodami daugialypės terpės siuntimu naudojant RxJS subjektus, tačiau paprastai jie neveikia kaip EventEmitters.
Stebimi dalykai yra kaip funkcijos su nuliu argumentų, tačiau jas apibendrinkite, kad būtų galima naudoti kelias reikšmes.
Pažiūrėkime pavyzdį, kad tai aiškiai suprastume.
Paprastas funkcijos pavyzdys:
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); Išvestis:
Pamatysite šią išvestį:
'Hello World!' 123 'Hello World!' 123
Parašykime tą patį pavyzdį, bet su 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); }); Išvestis:
Pamatysite tą patį išvestį, kaip ir aukščiau:
Tai matote, nes ir funkcijos, ir Stebimi yra tingūs skaičiavimai. Jei funkcijos neiškviesite, console.log('Sveikas, pasauli!') neįvyks. Be to, naudojant Observables, jei nepaskambinsite jo su prenumerata, console.log („Hello World!“) neįvyks.
Stebimiojo darbas
Stebimi trys fazės:
- Stebimų objektų kūrimas
- Stebimi prenumerata
- Stebimų dalykų vykdymas
Stebimų objektų kūrimas
Yra du būdai, kaip sukurti stebimus elementus:
- Naudojant Observable konstruktoriaus metodą
- Naudojant Observable create() metodą
Naudojant Stebimo konstruktoriaus metodą
Sukurkime stebimą objektą naudodami stebimo konstruktoriaus metodą ir pridėkite pranešimą „Tai mano pirmasis stebimasis objektas“, naudodami „Stebimoje“ pasiekiamą metodą subscriber.next.
testrx.js failas:
import { Observable } from 'rxjs'; var observable = new Observable( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); Taip pat galite sukurti stebimą naudodami metodą Observable.create() taip:
import { Observable } from 'rxjs'; var observer = Observable.create( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); Stebimi prenumerata
Stebimo turinio prenumerata yra tarsi funkcijos iškvietimas. Tai suteikia atgalinius skambučius, kur bus pristatyti duomenys.
Galite užsiprenumeruoti stebimą informaciją naudodami šią sintaksę:
Sintaksė:
observable.subscribe(x => console.log(x));
Žiūrėkite aukščiau pateiktą prenumeratos pavyzdį:
runas in powershell
testrx.js failas:
import { Observable } from 'rxjs'; var observer = new Observable( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); observer.subscribe(x => console.log(x)); Išvestis:
Stebimų dalykų vykdymas
Stebimasis yra vykdomas jį užsiprenumeravus. Paprastai yra trys stebėtojo metodai, apie kuriuos pranešama:
Kitas(): Šis metodas naudojamas tokioms reikšmėms kaip skaičius, eilutė, objektas ir kt.
užbaigti (): Šis metodas nesiunčia jokios vertės. Tai rodo, kad stebėjimas baigtas.
klaida (): Šis metodas naudojamas pranešti apie klaidą, jei ji yra.
Pažiūrėkime pavyzdį, kai sukūrėme stebimą informaciją su visais trimis pranešimais ir vykdysime tą pavyzdį:
testrx.js failas:
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.')); Klaidos metodas iškviečiamas tik tada, kai yra klaida. Kai paleisite aukščiau pateiktą kodą, konsolėje pamatysite šią išvestį.
Išvestis:
