Home  >  Article  >  Web Front-end  >  Detailed explanation of the use of Rxjs

Detailed explanation of the use of Rxjs

php中世界最好的语言
php中世界最好的语言Original
2018-03-12 15:46:002874browse

This time I will bring you a detailed explanation of the use of Rxjs. What are the precautions when using Rxjs? The following is a practical case, let’s take a look.

During the execution of an observable object, zero to infinite next notifications are sent. If an Error or Complete notification is sent once, no value will be sent thereafter.

The observable object strictly adheres to this contract, so the following code will not send a next notification containing the value 4

var observable = Rx.Observable.create(function subscribe(observer) {
observer.next(1);
observer.next(2);
observer.next(3);
observer.complete();
observer.next(4); // Is not delivered because it would violate the contract});

A good way is to wrap it with a try/catch statement Notification statement, if an exception is caught, an error notification will be sent.

var observable = Rx.Observable.create(function subscribe(observer) {try {
observer.next(1);
observer.next(2);
observer.next(3);
observer.complete();
} catch (err) {
observer.error(err); // delivers an error if it caught one}
});

Unsubscribe unsubscribe()

Since the execution of observable objects may be infinite (continuous next), observers often want to terminate within a limited time execution, so we need an API to cancel the execution.

var observable = Rx.Observable.from([10, 20, 30]);var subscription = observable.subscribe(x => console.log(x));// Later:subscription.unsubscribe ();

After you subscribe, you will get a Subscription object, which represents the ongoing execution. Feel free to use unsubscribe() to terminate execution.

observerObserver

What is an observer? Observers are consumers of data sent by observable objects. Simply put, observers are a set of callback functions, which respectively correspond to a type of notification sent by the observable object: next, error and complete. The following is an example of a typical observer object:

var observer={next:x=>console.log('Observer got a next value: ' + x),error: err => console.error('Observer got an error: ' + err),complete: () => console.log('Observer got a complete notification')
}

An observer is just an object composed of three callback functions Array. Each callback function corresponds to the notification type of the observable object.

Subscription Subscription

Subscription objects can also be placed together, so calling unsubscribe() on one subscription object can cancel multiple subscriptions. The method is: "add" one subscription to another subscription.

var observable1 = Rx.Observable.interval(400);var observable2 = Rx.Observable.interval(300);var subscription = observable1.subscribe(x => console.log('first: ' + x));var childSubscription = observable2.subscribe(x => console.log('second: ' + x));
subscription.add(childSubscription);
setTimeout(() => {// Unsubscribes BOTH subscription and childSubscriptionsubscription.unsubscribe();
}, 1000);

After execution, we can get in the console:

second: 0
first: 0
second: 1
first: 1
second: 2

Subscription also has a remove(otherSubscription) method, which is used to cancel the sub-subscription added by add.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to the php Chinese website Other related articles!

Related reading:

Detailed explanation of the use of js-xlsx tool library xlsxUtils

Integration of daily common functions of JS

The above is the detailed content of Detailed explanation of the use of Rxjs. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn