Preface
The core of RxJs is the Observable object, which is a combination of asynchronous and event programming using observable data sequences.
The asynchronous programming model that is very similar to this is Promise. Promise is an asynchronous model based on state changes. Once the waiting state enters a successful or failed state, it cannot be modified again. When the state changes, the subscriber can only get one value; while Observable is an asynchronous programming model based on sequences. As the sequence changes, the subscriber can continuously obtain new values. Moreover, Promise only provides a callback mechanism and does not have more operations to support complex processing of results. Observable provides a variety of operators to process operation results to meet complex application logic.
In actual programming, we mainly deal with three objects: Observable , observer , Subscription :
Take the click event of an element as an example 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); Wouldn't it be too troublesome if each event needs to be wrapped like this? Therefore, RxJs provides us with a convenient function: Observable.fromEvent to facilitate connection of events.
Common link operators: concat, merge, combineLates, etc.
Projection operations: map, flatMap, flatMap needs to be introduced
Filter: filter, distinctUltUltChanges,
Operator classification: Operators by Categories
Error handling: catch, retry, finally
Decompression: debounce, throttle, sample, pausable
Reduce: buffer, bufferWithCount, bufferWithTime
To master the operators of Observable, you must first learn to understand the sequence diagram:
Arrows represent sequences that change over time. For example, clicking the mouse continuously on an element, and the circle represents the impact of the sequence on the outside. For example, every click of the element will trigger an event callback, and the numbers in the circle are information emitted from the outside. For example, each event triggering will have an event object, representing some information of this operation.
To flexibly use Observable to handle complex logic, you must learn to use the operators it provides. I divided operators into two categories: single-sequence operation and composite sequence operation. Single-sequence operation refers to operation operations performed on one sequence. Compound sequence operation refers to operators that process two or more sequences. Compound sequence operation is relatively difficult to understand.
Let’s first look at single-sequence operations, taking map operations as an example:
The map operation is to convert the information transmitted to the outside in a sequence every time. As shown in the figure above, map multiplies the transmission value of each time by ten. Then when the subscriber subscribes, the subscription value obtained each time is no longer the original 123 but the converted 10 20 30. Through sequence diagrams, you can more easily understand Observable's operations.
Let's take merge as an example
The purpose of the merge operation is to synthesize two independent sequences into one sequence. Originally, as time progresses, sequence 1 transmits a at 100ms, b at 200ms, and c at 300ms, its subscriber will receive three values of abc at 400ms; sequence 2 transmits d at 150ms, e at 250ms, and f at 350ms, and its subscriber receives three values of def within 400ms. The new sequence after merge will receive abcdef within 400ms (note the order).
Understanding of common operators:
Observable.range: transmits a certain number of worth sequences.
Observable.toArray: Converts all emitted values into an array when the sequence is completed.
Observable.flatMap: converts elements in the original sequence stream into a new sequence stream and merges this new sequence stream to the location of the elements in the original sequence.
Observable.startWith: It sets the first value of the Observable sequence
Observable.combineLatest: Similar to promiseAll, it will be executed only after all sequences have results.
Observable.scan: The values emitted in the sequence can be aggregated. Similar to reduce, reduce will aggregate the values of the entire sequence and send a final value when the sequence is completed.
Observable.sample: Get a certain sample from a continuous sequence
Observable.merge: Merge multiple sequences into one, and can be used as OR
Observable.timestamp: Can obtain the time of transmission of each transmission value
Observable.distinctUntilChanged(compare, selector): selector takes out the key used for comparison, and compares it to compare two keys
Observable.takeWhile() stops transmitting data when the parameter is false
Summarize
The above is the entire content of this article. I hope that the content of this article will be of some help to everyone’s study or work. If you have any questions, you can leave a message to communicate.