What does it look like

We all know that the most basic way to use an RxJS Observable is to create an Observable, that is, call the.create API

The usage is as follows 🌰 :

var observable = Rx.Observable
	.create(function(observer) {
		observer.next('Hi');
		observer.next('Jimmy');
	})

observable.subscribe(
    value => {console.log(value)}
)

// Hi
// Jimmy
Copy the code

When an Observable instance is created, it calls.subscribe, passing.next(params) information to value and executing the function.

Next’s process is synchronous, but it can also be asynchronous, such as 🌰 :

var observable = Rx.Observable
	.create(function(observer) {
		observer.next('Hi');
		observer.next('Jimmy');

		setTimeout(() => {
			observer.next('async');
		}, 30)
	})

console.log('start');

observable.subscribe(
  value => {console.log(value)}
);

console.log('end');

// start
// Hi
// Jimmy
// end
// async
Copy the code

Where observer, in addition to the next method,

There are:

  • completemethods
  • errorMethods:

Usage: 🌰

var observable = Rx.Observable
	.create(function(observer) {
                observer.next('Hi');
                observer.next('Jimmy');
                observer.complete();
                observer.next('long time no see');
	})

observable.subscribe(
    value => { console.log(value); },
    error => { console.log('Error: ', error); },
    complete => { console.log('complete') },
)

// Hi
// Jimmy
// complete
Copy the code

“Long time no see” will no longer be printed.

Error is used to catch the ‘MSG’ of a try catch throw;

. try { observer.next('Hi'); observer.next('Jimmy'); throw 'some exception'; } catch(e) { observer.error(e) } ...Copy the code

Why do I write that

So why does it look like this? According to?

I’ll just write it like this. It doesn’t smell, right?

function fn1(){
    console.log('Hi')
    console.log('Jimmy')
    return false
}

fn1()
Copy the code

Why rewrite it like this:

function f1(cb){
    cb('Hi')
    cb('Jimmy')
    return false
}

fn1(value => console.log(value))
Copy the code

The most important point is to separate [data] from [the act of manipulating data].

In fact, the separation of constant data and operation methods (also called computational methods/computational functions) is an important idea of functional programming — everything you need is computed without changing the value of the variable;

(passing a function as an argument to another function, often referred to as a higher order function in FP;)

In the past, if data and operations were not separated, it looked like this:

function f1(){
    console.log('Hi')
    console.log('Jimmy')
    return false
}

function f2(){
    alert('Hi')
    alert('Jimmy')
    return false
}

fn1()
fn2()
Copy the code

Inside A function, you have an imperative code style, where you manipulate A data this way, and B data this way;

Now, separating the data from the action, it looks like this:

function stream(cb){ 
    cb('Hi')
    cb('Jimmy')
    return false
}

stream(value => console.log(value))
stream(value => alert(value))
Copy the code

The stream function declares A data and B data…… Is a data stream;

How to manipulate the data, see what the operation method is;

This has another great advantage:

For multiple data streams and multiple operations, its code structure will be clearer, less coupling, and more extensible;

It would look something like this:

class Stream { constructor(behavior) { this.behavior = behavior } doHandle(cb) { this.behavior(cb) } } const handleStream1 = new Stream(cb => { cb('Hi') cb('Jimmy') }) const handleStream2 = new Stream(cb => { cb('Bye') cb('Lily') }) / * * * * * * * * the above data flow statement is * * * * * * * * / / * * * * * * * * below is the operation * * * * * * * * / / / of data stream 1, Handlestream1.dohandle (value => console.log(value)) Handlestream1. doHandle(value => alert(value)) Handlestream2.dohandle (value => console.log(value)) Handlestream2. doHandle(value => alert(value))Copy the code

Note: The above operations (console and alert) are just a hint of the simplest alternatives, which can be much more complex in real code (complex calculations of data, etc.).

I’ll type, Stream is an Observable! Cb is an observer! DoHandle means subscribe!!

Summary:

No doubt, there are many more things Observable can do, but this article won’t give you a chance to understand them. Separating data declarations from data operations is an important feature in functional programming that improves code readability. The data pipes formed by the data, as well as the common pipe operations, will be covered later (focus on not getting lost)

What do you think of Observable? Welcome to comment and discuss.

I’m Nuggets Anthony, output exposure input, technical insight into life, see you next time ~~