RxJS - наблюдаемые
Наблюдаемый - это функция, которая создает наблюдателя и прикрепляет его к источнику, где ожидаются значения, например, от щелчков, событий мыши от элемента dom или запроса Http и т. Д.
Observer is an object with callback functions, который будет вызываться при взаимодействии с Observable, т. е. когда источник взаимодействовал для примера нажатия кнопки, запроса Http и т. д.
В этой главе мы собираемся обсудить следующие темы -
- Создать наблюдаемый
- Подписаться Наблюдаемый
- Выполнить наблюдаемый
Создать наблюдаемый
Наблюдаемый объект может быть создан с использованием наблюдаемого конструктора, а также с использованием наблюдаемого метода создания и путем передачи ему функции подписки в качестве аргумента, как показано ниже -
testrx.js
import { Observable } from 'rxjs';
var observable = new Observable(
function subscribe(subscriber) {
subscriber.next("My First Observable")
}
);
Мы создали наблюдаемый и добавили сообщение «Моя первая наблюдаемая», используя subscriber.next доступный внутри Observable.
Мы также можем создать Observable, используя метод Observable.create (), как показано ниже -
testrx.js
import { Observable } from 'rxjs';
var observer = Observable.create(
function subscribe(subscriber) {
subscriber.next("My First Observable")
}
);
Подписаться Наблюдаемый
Вы можете подписаться на наблюдаемое следующим образом -
testrx.js
import { Observable } from 'rxjs';
var observer = new Observable(
function subscribe(subscriber) {
subscriber.next("My First Observable")
}
);
observer.subscribe(x => console.log(x));
Когда наблюдатель подписан, он начнет выполнение Observable.
Это то, что мы видим в консоли браузера -
Выполнить наблюдаемый
Наблюдаемый объект запускается при подписке. Наблюдатель - это объект с тремя методами, которые уведомляются:
next() - Этот метод отправляет значения, такие как число, строка, объект и т. Д.
complete() - Этот метод не отправляет никакого значения и указывает наблюдаемое как завершенное.
error() - Этот метод отправит ошибку, если таковая имеется.
Давайте создадим наблюдаемый со всеми тремя уведомлениями и выполним то же самое.
testrx.js
import { Observable } from 'rxjs';
var observer = new Observable(
function subscribe(subscriber) {
try {
subscriber.next("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 complete"));
В приведенном выше коде мы добавили метод next, complete и error.
try{
subscriber.next("My First Observable");
subscriber.next("Testing Observable");
subscriber.complete();
} catch(e){
subscriber.error(e);
}
Чтобы выполнить next, complete и error, мы должны вызвать метод подписки, как показано ниже -
observer.subscribe(x => console.log(x), (e)=>console.log(e),
()=>console.log("Observable is complete"));
Метод ошибки будет вызван только в случае ошибки.
Это результат, видимый в браузере -