U RxJS, observable je funkcija koja se koristi za stvaranje promatrača i njegovo pripajanje izvoru odakle se očekuju vrijednosti. Na primjer, klikovi, događaji miša iz DOM elementa ili Http zahtjeva itd. primjeri su vidljivih.
Drugim riječima, možete reći da je promatrač objekt s funkcijama povratnog poziva, koje se pozivaju kada postoji interakcija s Observableom. Na primjer, izvor je stupio u interakciju za primjer, klik na gumb, Http zahtjev, itd.
hrithik roshan doba
Opservable se također mogu definirati kao lijene Push kolekcije višestrukih vrijednosti. Pogledajmo jednostavan primjer da bismo razumjeli kako se vidljive vrijednosti koriste za promicanje vrijednosti.
Pogledajte sljedeći primjer:
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); }); U gornjem primjeru postoji observable koji gura vrijednosti 10, 20, 30 odmah i sinkrono kada se pretplati, ali vrijednost 40 bit će gurnuta nakon jedne sekunde od pozivanja metode pretplate.
Ako želite pozvati observable i vidjeti gornje vrijednosti, morate se pretplatiti na to. Pogledajte sljedeći primjer:
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'); Izlaz:
Kada izvršimo gornji program, na konzoli ćemo dobiti sljedeći rezultat:
Opservable su generalizacije funkcija
Znamo da su observable funkcije koje djeluju kao klikovi, događaji miša iz DOM elementa ili Http zahtjeva, itd. ali observables nisu kao EventEmitters, niti su kao Promises za višestruke vrijednosti. U nekim slučajevima, observables se mogu ponašati kao EventEmitters, naime kada se multicastiraju koristeći RxJS Subjects, ali obično se ne ponašaju kao EventEmitters.
Observables su poput funkcija s nula argumenata, ali ih generalizirajte kako biste dopustili višestruke vrijednosti.
Pogledajmo primjer da bismo ovo jasno razumjeli.
Jednostavan primjer funkcije:
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); Izlaz:
Vidjet ćete sljedeći izlaz:
'Hello World!' 123 'Hello World!' 123
Napišimo isti primjer, ali s 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); }); Izlaz:
mylivecricket za kriket uživo
Vidjet ćete isti izlaz kao gore:
To možete vidjeti jer su i funkcije i Observables lijena izračunavanja. Ako ne pozovete funkciju, console.log('Hello World!') se neće dogoditi. Također, s Observables, ako ga ne 'nazovete' s subscribe, console.log('Hello World!') se neće dogoditi.
Rad observable
Postoje tri faze u opservabli:
- Stvaranje vidljivih
- Pretplata na Observables
- Izvršavanje Observables
Stvaranje vidljivih
Postoje dva načina za stvaranje vidljivih vrijednosti:
- Korištenje metode Observable constructor
- Korištenje metode Observable create().
Korištenje metode Observable constructor
Kreirajmo observable pomoću metode konstruktora observable i dodajmo poruku 'Ovo je moj prvi Observable' pomoću metode subscriber.next dostupne unutar Observablea.
datoteka testrx.js:
import { Observable } from 'rxjs'; var observable = new Observable( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); Također možete stvoriti Observable koristeći metodu Observable.create() na sljedeći način:
import { Observable } from 'rxjs'; var observer = Observable.create( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); Pretplata na Observables
Pretplata na observablu je kao pozivanje funkcije. Omogućuje povratne pozive gdje će podaci biti isporučeni.
Možete se pretplatiti na observable korištenjem sljedeće sintakse:
Sintaksa:
observable.subscribe(x => console.log(x));
Pogledajte gornji primjer s pretplatom:
datoteka testrx.js:
import { Observable } from 'rxjs'; var observer = new Observable( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); observer.subscribe(x => console.log(x)); Izlaz:
Izvršavanje Observables
Observable se izvršava kada je pretplaćen. Općenito postoje tri metode u promatraču koji se obavještavaju:
Sljedeći(): Ova metoda se koristi za slanje vrijednosti kao što su broj, niz, objekt itd.
sdlc životni ciklus
dovršeno(): Ova metoda ne šalje nikakvu vrijednost. Označava da je observabla završena.
greška(): Ova se metoda koristi za obavještavanje o pogrešci ako postoji.
Pogledajmo primjer u kojem smo stvorili observable sa sve tri obavijesti i izvršimo taj primjer:
datoteka testrx.js:
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.')); Metoda greške se poziva samo ako postoji greška. Kada pokrenete gornji kod, vidjet ćete sljedeći izlaz u konzoli.
Izlaz:
