The Method of Asynchronous Call by Observable in Angular



Observable is a multivalued set based on Push runtime execution (lazy).

Pull and Push

Pull and push are two different mechanisms of communication between data producers and data consumers.

  • Pull: In a pull system, it is always up to the consumer to decide when to get data from the producer. Producers have no sense of the time that data is passed to consumers (passive producers, active consumers)
  • Push: In a push system, the producer decides when to transmit data to the consumer, and the consumer has no sense of when to receive the data (passive consumers)

Promise and Observable in JS

  • Promise is a typical push system in modern JavaScript. Promise, as a data producer, passes data to the data consumer through the resolution () callback function: unlike functions, Promise decides when to push values to the callback function
  • RxJS introduces Observable (Observable Object) as a new push system in JavaScript. Observable is a producer of multiple data values, pushing data to Observer (passive consumer)

Observable and function, promsise

  • Functions are computed synchronously when invoked and eventually return only one value
  • Promise will or will not return a value
  • Observable is computed synchronously or asynchronously when invoked, and may produce 0 to infinite values

Observable is an extension of the concept of function

  • Observable is like a function without parameters, and constantly generates some values for us to use, so it is also like an Event Emitters.
  • In Observable, subscribe is like a call function. If you subscribe to it, it will be’booted’. The same Observable does not share results for different subscribes (usually, but it can be shared by calling the api)

Four Cores of Observable


  • Rx. Observable. create is an alias for the Observable constructor and accepts a parameter: subscribe function.
  • In addition to creating Observable using create, we usually create Observable using create operators such as of, from, interval, etc.


  • Observable. subscribe and Observable. create (function subscribe (observer) { }) subscribe is not the same object, but it can be conceptually regarded as equivalent in Engineering
  • Observers calling subscribe do not share the same Observable
  • The subscription mechanism is completely different from the addEventListener/removeEventListener API for handling events. Observers do not need to register with Observable through observable. subscribe, and Observable does not need to maintain a list of subscribers.
  • Subscription enters the execution phase of Observable, where values and events are passed to the observer for consumption.


  • Observable will only be executed after being subscribed. The logic to execute is Observable. create (function subscribe (observer) { }) It is described that multiple data values will be generated synchronously or asynchronously within a specified period of time after execution.
  • During the execution of Observable, three types of values can be pushed:
    • Next notification: Actually generated data, including numbers, strings, objects, etc.
    • Error notification: A JavaScript error or exception
    • Complete notification: an event with no value
  • During the execution of Observable, 0 or more “Next” notifications are pushed
  • Observable will not push any other notification after the error or completion notification has been pushed.


  • Observable execution can be infinite, and as an observer, you need to actively interrupt execution: We need a specific API to terminate the execution process
  • Because a particular observer has a specific execution process, once the observer gets the desired data, it needs to terminate the execution process in order to avoid wasting memory resources in computation.
  • When observable. subscribe is called, the observer binds to its execution scope and returns an object of Subscription type. By calling subscription. unsubscribe (), you can terminate the execution process.

Angular has a class called Observable. The name shows that it provides a similar function of the observer pattern.

That is to say, when we wrap the return value of a function in the Observable class, the user of the calling function can subscribe to the function, and then after being notified, follow-up is done, that is, asynchronous invocation process rather than synchronous waiting.

import { Observable } from 'rxjs/rx';
import { of } from 'rxjs/observable/of';

getHeroes(): Observable<Hero[]> {
this.messageService.add('HeroService: fetched heroes');

return of(HEROES);

The above function is encapsulated in Observable, and after the strong turn of of the function, it is an asynchronous function, so that the subsequent processing, such as refresh, is called after the function is completed.
this.heroService.getHeroes().subscribe(heroes => this.refreshTree(heroes));

Reference resources:

The above is the whole content of this article. I hope it will be helpful to everyone’s study, and I hope you will support developpaer more.

Recommended Today

Optimize spring boot in this way, and the startup speed is fast enough to fly!

It’s fun to use microservices for a while, but it’s not good to use them. Especially for the problems of service splitting, such as not controlling the business boundary well, splitting particles are too large, and some spring boot startup speeds are too slow. You may also have this experience. Here we will explore some […]