Rxjs que

What is Rxjs

Rxjs is a library that uses observable sequences to write asynchronous and event-based programs. The core type of Rxjs is observable. Let’s take a look at Rxjs with a simple example.

import {Observable} from 'rxjs'
const observable = new Observable(subscribe= > {
    subscribe.next('Hello');
    subscribe.next('Rxjs');
});
observable.subscribe(v= > console.log(v));

// Output the result
Hello
Rxjs
Copy the code

Let’s start with the API and usage of Rxjs

Observable Observable

Observables are the core Rxjs type. Observables can be generated by observables, which can then be subscribed and distributed. Before we introduce the concepts of pull and push, which are two different protocols that describe how data producers and data consumers communicate.

• Pull: Such as HTTP requests made by functions and clients to servers, it is the consumer who decides when to fetch data from producers.
• Push: Like promises and sockets, producers decide when to push data to consumers.

The main Observable today is a Push.

Observables create

import {Observable} from 'rxjs';
const observable = new Observable(subscribe= > {
   subscribe.next('value');
})
Copy the code

An Observable is instantiated with the new keyword Observable to generate an instance of the Observable. A callback function is passed during the instantiation, which notifys the subscriber (or data consumer) to execute through the next call (error and complete can also be called).

Observables subscription

observable.subscribe(v= > console.log(v))
Copy the code

Subscribe, the callback is the data consumer, and each subscription executes the instantiation callback, and each next callback executes the data consumer and passes the argument to the data consumer. Subscribe there are two types of subscription parameters:

• Function: The interior is assigned tonextattribute
• Object:
  • Next: Executes the property value when next is called in the parameters of an Observable instantiation
  • Error: The value of this property is executed when error is called in the parameters of an Observable when instantiated

As mentioned above, the instantiation callback function can execute error and complete in addition to next, where the execution of error will execute the value of the subscriber’s error attribute, and the execution of complete will indicate that the execution is complete. The subscriber will not be notified of the following execution of next or error.

unsubscribe

The subscribe function subscribe returns a subscriber object, which we can unsubscribe by executing the unsubscribe method of the subscriber object:

const sub = observable.subscribe(v= > console.log(v));
// Unsubscribe
sub.unsubscribe();
Copy the code

Other subscriptions can also be added to a subscription via the add method of the returned subscriber object, for example:

const sub1 = observable.subscribe(v= > console.log(`sub1 ${v}`));
const sub2 = observable.subscribe(v= > console.log(`sub2 ${v}`));
// Add sub2's subscription to sub1
sub1.add(sub2);
setTimeout(() = > {
	// Both sub1 and sub2 will be unsubscribed
	sub1.unsubscribe();
}, 2000);
Copy the code

Subject

The observable described above is unicast, that is, when we subscribe, we only notify the one we subscribe to, as follows:

import {Observable} from 'rxjs';
const observable = new Observable(subscribe= > {
	subscribe.next('111');
    subscribe.next('222');
})

observable.subscribe(v= > console.log(`observable1 ${v}`));
observable.subscribe(v= > console.log(`observable2 ${v}`));
Copy the code

The output is:

observable1 111
observable1 222
observable2 111
observable2 222
Copy the code

If it is multicast, it will print:

observable1 111
observable2 111
observable1 222
observable2 222
Copy the code

Subject is a special Observable type that allows values to be multicast to multiple observers. Within the Subject, SUBSCRIBE does not call the new execution passing the value, which registers the observer to the registry. Similar to how addEventListener works, it can be used as follows:

import {Subject} from 'rxjs';

const subject = new Subject();
subject.subscribe(val= > console.log(`subject1 ${val}`));
subject.subscribe(val= > console.log(`subject2 ${val}`));
subject.next(1);
subject.next(2);
Copy the code

Output result:

subject1 1
subject2 1
subject1 2
subject2 2
Copy the code

Since the topic is an observer, it has properties like Next, error, etc., and can be used as follows

import {Subject, from } from 'Rxjs';

const subject = new Subject();
subject.subscribe(v= > console.log(v));
const observable = from([1.2.3]);
observable.subscribe(subject);
Copy the code

Output result:

1
2
3
Copy the code

This concludes the basic Rxjs API and usage. In practice, I will use it in Angular. Since I am a Vue technology stack, I just started to contact Angular recently, and found that Rxjs is used frequently in Angular, so I learned about it. Good good study, day day up 👆