What are an Observer and an Observable

In RxJS, an Observable is a stream object that can be subscribed to, while an observer is an Observable that subscribes to. It is important to understand the difference and connection between the two.

Use an example from the RxJS website to illustrate

var Obsec = Rx.Observable.create(function (observer) {
  observer.next(1);
  observer.next(2);
  observer.next(3);
  observer.complete();
});
observable.subscribe(
  value => console.log(value),
  err => {},
  () => console.log('this is the end'));Copy the code

As shown above, create (a way of creating an Observable) creates an Observable, which consists of sequential steps of a stream of observer methods to build a completed Observable observer object.

The methods of the Observer include:

  • Observer. next(value): a promise-like then indicating the next incoming or action;
  • Observer.com plete(): Indicates that the stream of the observer object is finished, and that next will no longer function after complete() is fired;
  • Observer.error (): Executes when an error is reported and terminates the stream;

The above three methods can be abbreviated in the SUBSCRIBE function following the stream object

ob.subscribe({
    next: d => console.log(d),
    error: err => console.error(err),
    complete: () => console.log('end of the stream')})Copy the code

Normally a subscribe object is executed as a next function when only one function is passed in.

How do I create an Observable

RxJS has a number of methods for creating observables that allow everything to stream.

The most basic creation method is CREat

As in the previous example, the create method is created somewhat like a promise, and the next() function can pass in anything, including another Observable.

var observable = observable
	.create(function(observer) {
		observer.next('lina'); 
		observer.next('pom');
		observer.next('luna');
	})
Copy the code

Subscribe to this Observable and it sends’ lina ‘, ‘POm’, and ‘luna’ in turn. It’s also worth noting that this creation is done synchronously, allowing RXJS to handle both synchronous and asynchronous behavior.

of

In real projects, we can often just introduce operators instead of Observables. The trouble to operate

import { of } from 'rxjs';

of('lina'.'pom'.'luna').subscribe(res => console.log(res))
// lina
// pom
// luna
Copy the code

Of is an easy way to create an Observable

from

From is a method that converts an array into an Observable

import { from } from 'rxjs';

const arr = ['lina'.'pom'.'luna'];
from(arr).subscribe(res => console.log(res));
// lina
// pom
// luna
Copy the code

fromEvent

FromEvent converts time listeners to streams

import { from } from 'rxjs';

let eventListener = fromEvent(document.body, 'click');
eventListener.subscribe(() => console('click'))
Copy the code

‘Click’ is printed when the page is clicked.

interval, timer

Interval creates an Observable that emits events at specified intervals

import { interval } from 'rxjs';

interval(1000).subscribe(res => console.log(res))
    // 0
    // 1
    // 2
    // ...
Copy the code

Timer is similar to interval in that it takes two parameters. The first parameter represents the time at which the first element is emitted, and the second parameter represents the interval at which subsequent elements are emitted.

Subscribe (res => console.log(res)) // interval one second // 0 // interval 5s // 1 // interval 5s // 2 //...Copy the code

The first argument can also be set to Date, indicating that it starts at the specified Date and time

The empty, never throw

A few more special operators.

  • Empty creates an empty Observable that listens on.

  • Never Creates an Observable that never finishes.

  • Throw creates an observable that immediately throws an error.

But none of this is used…

unsubscribe

There’s another way to give an Observable the middle finger, besides using the operators we’ll cover later.

Subscribe () is a Subscription object that has an unsubscribe method that satisfies unsubscribe requirements.

import { interval } from 'rxjs';

let subp = interval(1000).subscribe(res => console.log(res))
setTimeout(() => {sub.unsubscribe () // unsubscribe}, 4000); // 0 // 1/2 // 3Copy the code