[RxJS in Angular]-Roles and processes

1. Main role

        For the various role objects involved in the asynchronous event flow, RxJS has made the following definitions:

• Subject: the subject, that is, the subject that generates the data stream
• Observable: Observable objects, which can be regarded as data streams
• Observer: The observer is responsible for receiving and processing the data in the response data stream.

        Observers are consumers of values ​​emitted by an Observable. Embodied in the code, the observer is a collection of callback functions, and each callback function corresponds to a type of notification sent by Observable: next, error and complete.

let observer = {
  next: x => console.log('Observer got a next value: ' + x),
  error: err => console.error('Observer got an error: ' + err),
  complete: () => console.log('Observer got a complete notification'),
};

• Subscription: The return value of the subscription method observable.subscribe(observer) is a Subscription.

        Subscribing (verb) to an observable using an observer (callback method) produces a subscription (noun).

2. The complete process

2.1 Create Observable

Create an Observable using the constructor that sends the string 'hi' to the observer every second:

    let observable = new Observable(function subscribe(observer) {
      let id = setInterval(() => {
        observer.next('hi')
      }, 1000);
    });

2.2 Subscribing to Observables

observable.subscribe(x => console.log(x));

2.3 Executing Observables

        In the new Observable() method, the code in the function subscribe(observer) {} method means "Observable execution", which is a lazy operation and will only be executed after each observer subscribes. Executions produce multiple values ​​over time, either synchronously or asynchronously.

        Observable implementations can pass three types of values:

• "Next" notification: Sends a value, such as a number, string, object, etc.
• "Error" notification: Sends a JavaScript error or exception.
• "Complete" notification: no more values ​​are sent.

        "Next" notifications are the most important and also the most common type: they represent the actual data delivered to the observer. The "Error" and "Complete" notifications may only happen once during the execution of the Observable, and only one of them will be executed.

    let observable = new Observable((observer: any) => {
      try {
        observer.next(1);
        observer.next(2);
        observer.complete();
      } catch (err) {
        observer.error(err); 
      }
    });

        During an Observable execution, zero to infinitely many "Next" notifications may be sent. If an "Error" or "Complete" notification is sent, then no further notifications will be sent.

2.4 Clean up Observable execution

        Because Observable execution can be infinite, and observers usually want to be able to abort execution for a finite amount of time, we need an API to cancel execution. Because each execution is exclusive to its corresponding observer, once the observer finishes receiving values, it must have a way to stop execution to avoid wasting computing power or memory resources.

        When observable.subscribe is called, the observer will be attached to the newly created Observable execution. This call also returns an object, the Subscription:

  let subscription: Subscription = observable.subscribe(d => { console.log(d); });

        In-progress execution can be canceled by calling the unsubscribe() method:        

subscription.unsubscribe();

        The actual process is not necessarily strictly in the above order, it is also possible to subscribe after the Observable is executed.