Learning RXJS: Importing

Original address: http://www.moye.me/2016/05/31/learning_rxjs_part_one_preliminary/

Introduction

When beginners fall in asynchronous programming, there is always a classic question: How to return a result in an asynchronous call?

The old driver said to use the callback function, then the conditional judgment of the nested callback (callback Hell) problem came;

Older drivers recommend using events, and then asynchronous processes have sequential dependencies;

The old driver recommended with promise, and then there is the process of order dependence, incredibly also want to subscribe to events;

The old driver suggested to try the association, who knows the other wants to merge two asynchronous calls;

......

The above, is the asynchronous programming to face some of the problems, but also the Reactivex API is committed to solve

What is it

Know that there is a reactivex such a thing, from a hard iron powder of the Amway Demo: Reactive LINQ plus C #, concise and expressive, followed by the attention of Angular 2, the standard package of the goods have rxjs, abound of api.invocation.map(...).subscribe(fn, fn, fn) pieces, Let the jquery youths confused.

It is always bad to be out of the woods, when the birds in the forest are talking about FRP, we should also keep up with:

Reactivex is the abbreviation for reactive extensions, generally abbreviated as RX, originally an extension of LINQ, developed by Microsoft architect Erik Meijer led team, open source in November 2012, RX is a programming model, The goal is to provide a consistent programming interface that helps developers more easily handle asynchronous data streams , and the RX Library supports. NET, JavaScript, and C++,rx in recent years, and now supports almost all popular programming languages. Most of the Rx language libraries are maintained by the Reactivex organization, which is popular with rxjava/rxjs/rx.net, and the community site is Reactivex.io.

Concept

Reactivex's Readme is "an API for asynchronous programming with observable streams", so what is observable and what is stream?

Stream

Erik Meijer sent an article paper: "Your Mouse is a Database", probably means that the user's mouse click is actually an infinite and real-time sequence of events, can be regarded as a time-line-related data flow, we can query and manipulate the data flow, When it is available (or wait for the data flow to be available):

In Rx programming, any data can be expressed as a form of data flow, we have to do is to subscribe to the data flow, query, filtering, flattening, merging and other operations.

Because it is a subscription (observation) of the data flow sequence, the RX programming model is actually built on two design patterns, Observer pattern and Iterator pattern.

Observable

In Rx, observable is a sequence that pushes the value of the Subscriber (Subscriber) sequentially, following a set of "t call us; We'll call you in the Basic Law.

The Observable-based model differs from the traditional Observer pattern in its two-point nature:

1. Observable data only begins to flow when there is at least one subscriber
2. Observable notifies when the data stream ends (iterator no longer hasnext) (oncompleted)

How to use

Most programmers have been trained to be Machiavelli: "The whole point is useful." So, let's take a look at RXJS how to use it:

Scene

I have a class C LAN, want to ping the network of devices, to see which IP online (do not know the DHCP client list, so you have to ping from xxx.xxx.xxx.2 to xxx.xxx.xxx.254)

Ideas

Obviously, Ping is an asynchronous operation, there are about 254-2 = 252 asynchronous operations, the difficulty is not asynchronous, but in the process control, in the RXJS, it is convenient to merge the observable source, so that the asynchronous data flow controllable and orderly

RXJS Program Dependencies

"Dependencies": {    "ping": "^0.1.10",    "Ramda": "^0.21.0",    "rx": "^4.1.0",}

Code

var Rx = require (' rx ') var R = require (' Ramda ') var Pingcommand = require (' ping ') var config = {  timeout:10,       //timeout is 1 0 seconds  Extra: ["-I 2"],   //}function promisableping (host) {  return new Promise (Resolve, Reject)    PingCommand.sys.probe (host      , isAlive = isAlive? Resolve (Host): Reject (' ${host}: Unreachable. ')      , config)  })}function Ping (host) {  return Rx.Observable.create (Observer = = {    return promisableping ( Host). Then      (host = Observer.onnext (host)). Then      (_ = = observer.oncompleted ())      . catch (Err = Observer.onerror (Err)  })}var tasks = R.range (2, 254). Map (I-= Ping (' 192.168.50.${i} ')) Rx.observable  . Merge (... tasks)  . Subscribe (    host = Console.log (' Pong: ${host} '),    err = console.error (err)  )

Description

The code is simple enough, and it's worth explaining:

1. The merge-merged operation flow is a sequence of operations that ping the IP in the 192.168.50.2-254 range of devices, but observable has a feature that triggers the The error callback (that is, the observer who created the Rx.Observable.create, made a onerror notification, triggering the consumer to provide the second parameter to the SUBSCRIBE function) then the entire Observable sequence ends. For example, my class C subnet is on two devices online: xxx.xxx.xxx. 100 and xxx.xxx.xxx.200, then xxx.xxx.xxx.2 in 10 seconds after the super-times wrong, that this observable time line looks like this:
   BEGIN-> .100-.200---------------------[.2 error] ->END
2. Ramda is a good functional JS library, of course, used to become lodash is not bad

Summary

Above, just the tip of the iceberg, next, want to talk about RXJS-based web framework: Cycle.js

More articles please visit my blog new address: http://www.moye.me/

Learning RXJS: Importing