Make writing a habit together! This is my first day to participate in the “Gold Digging Day New Plan ยท April More text challenge”, click to see the details of the activity.

I recently wrote three introductory articles about RxJS:

  • Are you functional responsive programming (FRP)? ! ใ€ RxJS ใ€‘
  • Why: The observed is push data and the iterator is pull data?
  • Why does RxJS Observable look the way it does? !

A few months ago, there were also two RxJS debunks:

  • Callback=>Promise=>Observer
  • Continues with asynchronous processing — RxJS Observable

RxJS has a lot of magic, including chained calls, lazy output values, isolated data and operations, responsive programming, and more;

It is a practical application of MonAD in functional programming; It’s an evolution of Promise; It is the sword to understand and handle ASYNchrony……

So, by the opportunity of more text, new day by day, new month by month, learning RxJS then rushed ~

The observables operator — the observables operator — creates instances, which is the foundation of the foundation.

Operators provide an elegant declarative solution for complex asynchronous tasks, and creating instances is where it starts!

create

Create is no stranger to creating an Observable using a given subscription function;

// RxJS v6+ import { Observable } from 'rxjs'; /* Create an Observable that emits 'Hello' and 'World' in the subscribe function. */ const hello = Observable.create(function(observer) { observer.next('Hello'); observer.next('World'); }); // Output: 'Hello'... 'World' const subscribe = hello.subscribe(val => console.log(val));Copy the code

empty

Empty will give us an empty Observable. If we subscribe to this Observable, it will immediately send a complete message.

var source = Rx.Observable.empty(); source.subscribe({ next: function(value) { console.log(value) }, complete: function() { console.log('complete! '); }, error: function(error) { console.log(error) } }); // complete!Copy the code

fromย 

Use from to receive any enumerable argument (JS array);

// RxJS v6+ import { from } from 'rxjs'; Const arraySource = from([1, 2, 3, 4, 5]); 1,2,3,4,5 const subscribe = arraysource.subscribe (val => console.log(val));Copy the code

of

Of, like from, is used to operate on a list, emitting any number of values in order;

// RxJS v6+ import { of } from 'rxjs'; Const source = of(1, 2, 3, 4, 5); // output: 1,2,3,4,5 const subscribe = source.subscribe(val => console.log(val));Copy the code

fromEvent

FromEvent converts events into observable sequences;

// RxJS v6+ import { fromEvent } from 'rxjs'; import { map } from 'rxjs/operators'; Observable const source = fromEvent(document, 'click'); // Map to the given event timeStamp const example = source.pipe(map(event => 'event time: ${event.timestamp}')); // Output (the number in the example is run time): 'Event time: 7276.390000000001' const subscribe = example.subscribe(val => console.log(val));Copy the code

fromPromise

Frompromises create observables that transform from promises and issue the results of promises.

var source = Rx.Observable .fromPromise((resolve, reject) => { setTimeout(() => { resolve('Hello RxJS! '); Var source = rx.observable. From (new Promise(resolve, resolve)) reject) => { setTimeout(() => { resolve('Hello RxJS! '); }}, 3000)))Copy the code

interval

Clearly, the interval operation is time dependent and emits a sequence of numbers based on a given interval;

// RxJS v6+ import { interval } from 'rxjs'; Const source = interval(1000); // numbers: 0,1,2,3,4,5.... const subscribe = source.subscribe(val => console.log(val)); // import { interval } from 'rxjs'; // const source = interval(1000); Var source = rx.observable. interval(1000);Copy the code

timer

Timer is an upgrade of interval. It is used to emit numbers at specified intervals after a given duration.

// RxJS v6+ import { timer } from 'rxjs'; /* Timer receives the second parameter, which determines the frequency at which the sequence value is emitted. In this case, we emit the first value at 1 second, and then emit the sequence value every 2 seconds */ const source = timer(1000, 2000); // output: 0,1,2,3,4,5...... const subscribe = source.subscribe(val => console.log(val));Copy the code

OK, so that’s the core Observable operator that creates instances.

I’m Nuggets Anthony, output exposure input, technical insights into life, goodbye ~ ๐Ÿ‘๐Ÿ‘๐Ÿ‘