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

Detailed explanation of the use of Rxjs

php中世界最好的语言
Release: 2018-03-12 15:46:00
Original
2958 people have browsed it

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});
Copy after login

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}
});
Copy after login

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')
}
Copy after login

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);
Copy after login

After execution, we can get in the console:

second: 0
first: 0
second: 1
first: 1
second: 2
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template