В RxJS, наблюдаема е функция, която се използва за създаване на наблюдател и прикачването му към източника, откъдето се очакват стойности. Например щракванията, събитията с мишката от DOM елемент или Http заявка и т.н. са пример за наблюдавани.
С други думи, можете да кажете, че наблюдателят е обект с функции за обратно извикване, който се извиква, когато има взаимодействие с Observable. Например, източникът е взаимодействал за пример, щракване върху бутон, Http молба и др.
Наблюдаемите могат също да бъдат определени като мързеливи Push колекции от множество стойности. Нека видим един прост пример, за да разберем как наблюдаемите се използват за прокарване на стойностите.
Вижте следния пример:
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); }); В горния пример има наблюдаема, която избутва стойностите 10, 20, 30 незабавно и синхронно, когато се абонира, но стойността 40 ще бъде избутана след една секунда, след като методът за абониране е извикан.
Ако искате да извикате observable и да видите горните стойности, трябва да се абонирате за него. Вижте следния пример:
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'); Изход:
Когато изпълним горната програма, ще получим следния резултат на конзолата:
Наблюдаемите са обобщения на функции
Знаем, че наблюдаемите са функции, които действат като щраквания, събития с мишката от DOM елемент или Http заявка и т.н., но наблюдаемите не са като EventEmitters, нито са като Promises за множество стойности. В някои случаи наблюдаемите могат да действат като EventEmitters, а именно когато са мултикастирани с помощта на RxJS Subjects, но обикновено те не действат като EventEmitters.
Наблюдаемите са като функции с нула аргументи, но ги обобщете, за да позволяват множество стойности.
Нека видим пример, за да разберем това ясно.
Прост пример за функция:
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); Изход:
Ще видите следния изход:
'Hello World!' 123 'Hello World!' 123
Нека напишем същия пример, но с 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); }); Изход:
Ще видите същия резултат като по-горе:
Можете да видите това, защото и функциите, и Observables са мързеливи изчисления. Ако не извикате функцията, console.log('Hello World!') няма да се случи. Освен това, с Observables, ако не го „извикате“ с subscribe, console.log('Hello World!') няма да се случи.
Работа на наблюдаема
Има три фази в една наблюдаема:
топ 10 хентай
- Създаване на наблюдаеми
- Абониране за Observables
- Изпълнение на наблюдаеми
Създаване на наблюдаеми
Има два начина за създаване на наблюдаеми:
- Използване на метода на конструктора Observable
- Използване на метода Observable create().
Използване на метода на конструктора Observable
Нека създадем observable, като използваме метода на конструктора observable и добавим съобщение „Това е моят първи Observable“, използвайки метода subscriber.next, наличен в Observable.
файл testrx.js:
import { Observable } from 'rxjs'; var observable = new Observable( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); Можете също да създадете Observable, като използвате метода Observable.create(), както следва:
линукс архитектура
import { Observable } from 'rxjs'; var observer = Observable.create( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); Абониране за Observables
Абонирането за наблюдаема е като извикване на функция. Той осигурява обратни повиквания, докъде ще бъдат доставени данните.
Можете да се абонирате за наблюдаем, като използвате следния синтаксис:
Синтаксис:
observable.subscribe(x => console.log(x));
Вижте горния пример с абониране:
файл 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)); Изход:
Изпълнение на наблюдаеми
Един наблюдаем се изпълнява, когато е абониран. Обикновено има три метода в наблюдателя, които се уведомяват:
следващия(): Този метод се използва за изпращане на стойности като число, низ, обект и др.
завършен(): Този метод не изпраща никаква стойност. Това показва, че наблюдаемото е завършено.
грешка(): Този метод се използва за уведомяване за грешка, ако има такава.
Нека да видим пример, в който сме създали наблюдаемото с всичките три уведомления и да изпълним този пример:
файл 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.')); Методът за грешка се извиква само ако има грешка. Когато стартирате горния код, ще видите следния изход в конзолата.
Изход:
