У RxJS observable — це функція, яка використовується для створення спостерігача та приєднання його до джерела, звідки очікуються значення. Наприклад, клацання, події миші з елемента 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 буде надіслано через одну секунду після виклику методу subscribe.
Якщо ви хочете викликати observable і бачити наведені вище значення, ви повинні підписатися на нього. Подивіться наступний приклад:
перетворити рядок на int у java
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!') не відбудеться.
Робота Observable
У спостережуваному є три фази:
- Створення спостережуваних
- Підписка на 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)); Вихід:
Виконання спостережуваних
Спостережуваний виконується, коли він підписаний. Загалом у спостерігачі є три методи сповіщення:
наступний(): Цей метод використовується для надсилання таких значень, як число, рядок, об’єкт тощо.
завершити(): Цей метод не надсилає жодного значення. Це вказує на те, що обсервабель завершено.
сортування списку за java
помилка(): Цей метод використовується для сповіщення про помилку, якщо така є.
Давайте подивимося приклад, де ми створили observable з усіма трьома сповіщеннями та виконаємо цей приклад:
файл 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.')); Метод error викликається лише у разі виникнення помилки. Коли ви запустите наведений вище код, ви побачите наступний вихід у консолі.
Вихід:
