A detailed explanation of the programming objects in Angular2 Observable_angularjs

Objective

The core provided by RXJS is the observable object, which is a combination of asynchronous and event programming using observable data sequences.
The asynchronous programming model that is similar to this is Promise,promise is an asynchronous model based on state change, which cannot be modified once the waiting state has entered a success or failure state, and the subscriber can only get a value when the state changes, while the observable is a sequential asynchronous programming model, As the sequence changes, subscribers can continue to get new values. And promise only provides a reply mechanism, and there is no more action to support complex processing of results, while observable provides a variety of operators to handle the results of operations to meet complex application logic.

In practical programming, we deal with three main objects:observable,Observer,Subscription:

Take an example of the click event for an element to see how to use observable:

var clickstream = new Rx.observable (Observer => {
var handle = evt => observer.next (evt);
Element.addeventlistener (' click ', handle);

Return () => element.removeeventlistener (' click ', handle);
};

subscription = Clickstream.subscribe (evt => {
console.log (' onnext: ' + evt.id);
}, err => {
Console.error (' OnError ');
}, () => {
console.log (' OnComplete ');
})

; SetTimeout (() => {
subscription.unsubscribe ();
}, 1000);

If every event needs to be packaged like this, it's too much trouble, so RXJS provides us with a convenient function: Observable.fromEvent to facilitate the convergence of events.

Common link operators:concat, Merge, combinelates, etc.

projection operations:map, Flatmap,flatmap need to focus on the introduction

Filter:filter, Distinctultilchanges,

operator Category: Operators by Categories

error handling:catch, Retry, finally

decompression:debounce, throttle, sample, pausable

reduction:buffer, Bufferwithcount, bufferwithtime

To master observable's operations Fuxian to learn to understand sequence diagrams:

An arrow represents a sequence that changes over time, such as clicking a mouse on an element, the circle represents the external impact of the sequence, such as each click Element will trigger an event callback, the number in the circle is the external launch of information, such as the trigger for each event will have an event object, representing the operation of some information.

If you want to use observable to handle complex logic, learn to use the operators it provides. I divide the operators into two types: single sequence operation and complex sequence operation, and single sequence operation refers to the operation of a sequence, the complex sequence operation refers to the operation of two or more sequences, and the complex sequence operation is more difficult to understand.

Let's look at the single sequence and take the map operation for example:

The map operation is the conversion of each outgoing message in a sequence, as the above map multiplies each launch value by 10, so that when the Subscriber subscribes, the subscription value is no longer the original 123 but the converted 10 20 30. It is more convenient to understand the operation of observable by sequence diagram.

Let's look at a composite sequence operation, taking the merge as an example

The purpose of the merge operation is to synthesize a sequence of two independent sequences. Original sequence 1 with the advance of time, the launch of a at 100ms, the launch of the b,300ms when the 200ms launch of C, its subscribers in 400MS will be subject to ABC three; sequence 2 launch F when firing e,350ms at 150ms d,250ms Its subscribers receive def three values within 400ms. The new sequence after the merge will receive ABCDEF (note order) within 400MS.

Understanding of common operators:

Observable.range: firing a certain number of worthy sequences.

Observable.toarray: converts all launch values to an array when the sequence completes.

Observable.flatmap: Converts the elements in the original sequence stream into a new sequence stream and merges the new sequence into the position of the elements in the original sequence.

Observable.startwith: It sets the first value of the observable sequence

observable.combinelatest: similar to Promiseall, performed after all sequences have results

Observable.scan: The value of each launch in a sequence can be aggregated, and, like reduce, reduce aggregates the values of the entire sequence, sending a final value when the sequence completes

observable.sample: Obtain a certain sample from a continuous sequence

observable.merge: combine multiple sequences into one, can be used as an OR

Observable.timestamp: the time at which each launch value can be obtained

observable.distinctuntilchanged (Compare, selector): selector Take out the key,compare used to compare the two key

observable.takewhile () stop firing data when the argument is False

Summarize

The above is the entire content of this article, I hope the content of this article for everyone's study or work can bring certain help, if you have questions you can message exchange.