ANGULAR2 Study Notes--observable

Reactive Extensions for Javascript was born a few years ago, and it will be recognized by more developers as the release of the official version of ANGULAR2. The core provided by RXJS is the observable object, which is a combination of asynchronous and event programming using an observable data sequence. A similar asynchronous programming model is that Promise,promise is an asynchronous model based on state change, which cannot be modified once the status of the wait state enters a successful or failed state, and the subscriber can only get a value when the state changes, while the observable is a sequence-based asynchronous programming model, As the sequence changes, subscribers can continuously get new values. 　　And promise only provides a reply mechanism, and there is no more action to support the complex processing of the results, and observable provides a variety of operators to deal with the results of the operation to meet the complex application logic. In practical programming, we deal primarily with three objects: OBSERVABLE, Observer, Subscription: Take an example of an element's Click event to see how to use Observable:

 var  clickstream = new  rx.observable (Observer => var  handle = evt =>< Span style= "color: #000000;" > Observer.next (evt); Element.addeventlistener ( ' click '  return  () = Element.removeeventlistener (' click '  = clickstream.subscribe (evt => {Console.log ( ' onNext: ' +  Evt.id), err  => {Console.error ( ' OnError '  => {Console.log ( ' OnComplete '  => {Subscription.unsubscribe ();},  +); 

　　It would be too much trouble if every event had to be packed in such a way, so RXJS provided us with a convenient function: Observable.fromevent to facilitate the convergence of events.　　Common link operators: concat, Merge, combinelates and other projection operations: map, Flatmap,flatmap need to focus on filtering: filter, Distinctultilchanges, Operator classification: Operators by Categories error handling: Catch, Retry, finally decompression: debounce, throttle, sample, pausable Decrease: buffer, Bufferwithcount, bufferwithtime  want to master the operation of observable Mr. Foo to learn to understand the sequence diagram: Arrows represent the sequence of changes over time, such as the continuous click on an element of the mouse, the circle represents the sequence of external effects, If each click element will trigger an event callback, the number in the circle is emitted information, such as the trigger of each event will have an event object, representing the operation of some information. To use observable to handle complex logic, you need to learn to work with the operators it provides. I divide the operators into two categories, single-sequence operations and compound sequence operations, which refer to Operation operations on a sequence, which refers to operators that process two or more sequences, and complex sequence operations are relatively more difficult to understand. The following is a single-sequence operation, the map operation as an example: map operation is to convert a sequence of information emitted each time, such as map, the emission value of each time multiplied by 10, then the Subscriber after the subscription after 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 take a look at a composite sequence operation, with merge as an example the purpose of the merge operation is to synthesize a sequence of two independent sequences. Originally sequence 1 with the advance of the time, at 100ms, the launch of a, at 200ms when the launch of B,300ms C, its subscribers in 400MS will be subject to ABC three value, sequence 2 when the firing of d,250ms at 150ms firing e,350ms F, Its subscribers receive a def three value within 400ms. The new sequence after the merge will receive ABCDEF (note order) within 400MS.   Common operator Understanding: Observable.range: Emit a certain number of worthwhile sequences. Observable.toarray: When the sequence is complete, all theThe shot value is converted to an array. Observable.flatmap: Converts the elements in the original sequence stream into a new sequence stream, and merges the new sequence stream 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, does not execute observable.scan until all the sequences have results: The values of each emitted in the sequence can be aggregated, similar to reduce, and reduce aggregates the values of the entire sequence, sending a final value observable.sample when the sequence is complete: To obtain a certain sample from a continuous sequence Observable.merge: Combine multiple sequences into one, and you can do or to use Observable.timestamp: Can get the time observable.distinctuntilchanged (compare, selector) of each emission value at launch: Selector out the key to compare, Compare to compare two keyobservable.takewhile () stop transmitting data when the parameter is False  

Angular2 Learning Note--observable