Detailed explanation of Observable (observable object) in Angular

This article will take you through Angular Observable objects (Observable). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Related tutorial recommendations: "angular Tutorial"

Observable Object (Observable)

Observable objects support the delivery of messages between publishers and subscribers of the application.

Observable objects are declarative - that is, a function defined to publish a value. This function will not actually be executed until a consumer subscribes to it.

---

Three types of notifications that observable objects may issue:

Notification types	Description
next	Necessary. Used to process each delivery value. May be executed zero or more times after execution begins.
error	Optional. Used to handle error notifications. Errors interrupt the execution of this observable object instance.
complete	Optional. Used to handle execution completion (complete) notifications. When execution is complete, these values ​​will continue to be passed to the next processor.

---

Define observer

Observer: The processor used to receive notifications from observable objects must implement the Observer interface. This object defines some callback functions to handle three types of notifications that may be sent by observable objects.
Observer objects can define any combination of these three processors. If you do not provide a handler for a certain notification type, the observer will ignore notifications of that type.

// Create observer object
const myObserver = {
  next: (_data) => {
  	// next通知类型处理器
  },
  error: err => {
  	// error通知类型处理器
  },
  complete: () => console.log('Observer got a complete notification'),
};

Subscription

An Observable instance will publish a value only when the Observable instance is subscribed. When subscribing, you must first call the subscribe() method of the instance and pass it an observer object to receive notifications.

Syntax: Observable.subscribe(ObserverObject), where Observable is the observable object instance and ObserverObject is the observer object.

// 官网示例
// Create simple observable that emits three values
const myObservable = of(1, 2, 3);

// Create observer object
const myObserver = {
  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'),
};

// Execute with the observer object
myObservable.subscribe(myObserver);
// Logs:
// Observer got a next value: 1
// Observer got a next value: 2
// Observer got a next value: 3
// Observer got a complete notification

In addition, the subscribe() method can also receive callback functions defined in the same line, whether next, error or complete handler. For example, the following subscribe() call is equivalent to the previous example of specifying a predefined observer.

myObservable.subscribe(
  x => console.log('Observer got a next value: ' + x),
  err => console.error('Observer got an error: ' + err),
  () => console.log('Observer got a complete notification')
);

Note: In either case, the next notification type handler is necessary, while the error and complete handlers are optional.

The subscribe() call returns a Subscription object that has an unsubscribe() method. When this method is called, you stop receiving notifications.

For more programming related knowledge, please visit: Programming Video! !

The above is the detailed content of Detailed explanation of Observable (observable object) in Angular. For more information, please follow other related articles on the PHP Chinese website!