How can Observables be designed to exhibit both synchronous and asynchronous behavior?

Question

How can Observables be designed to exhibit both synchronous and asynchronous behavior?

From: Understanding the Contrasts Between Promises and Observables

In contrast, a Promise consistently operates asynchronously, while an Observable can function in synchronous or asynchronous manners.

This presents the opportunity to manipulate code in a way that allows Observables to exhibit either synchronous or asynchronous behavior as needed.

What is the inherent behavior of an Observable? Is it predominantly synchronous or asynchronous?

How could one implement functionality where Observables switch between synchronous and asynchronous behaviors based on specific requirements?

javascript angular typescript asynchronous rxjs

Answer 1

Answer №1

It all comes down to how the Observable is triggered.

If the initial call is synchronous, the observable will act synchronously.

const { Observable } = rxjs;

const helloWorld$ = new Observable(observer => {
  observer.next('Hello World');
  observer.complete();
});

console.log('Before subscribing helloWorld$');

helloWorld$.subscribe({
  next: console.log,
  complete: () => console.log('helloWorld$ on complete')
});

console.log('After subscribing helloWorld$');

<script src="//cdnjs.cloudflare.com/ajax/libs/rxjs/6.6.3/rxjs.umd.min.js">
</script>

If the initial call is asynchronous, the observable will behave asynchronously.

const { Observable } = rxjs;

const helloEarth$ = new Observable(observer => {
  // simulating an ajax call
  setTimeout(() => {
    observer.next('Hello Earth from a galaxy far, far away...');
    observer.complete();
  }, 1000);
});

console.log('Before subscribing helloEarth$');

helloEarth$.subscribe({
  next: console.log,
  complete: () => console.log('helloEarth$ on complete')
});

console.log('After subscribing helloEarth$');

<script src="//cdnjs.cloudflare.com/ajax/libs/rxjs/6.6.3/rxjs.umd.min.js">
</script>

Answer 2

It all comes down to how the Observable is triggered.

If the initial call is synchronous, the observable will act synchronously.

const { Observable } = rxjs;

const helloWorld$ = new Observable(observer => {
  observer.next('Hello World');
  observer.complete();
});

console.log('Before subscribing helloWorld$');

helloWorld$.subscribe({
  next: console.log,
  complete: () => console.log('helloWorld$ on complete')
});

console.log('After subscribing helloWorld$');

<script src="//cdnjs.cloudflare.com/ajax/libs/rxjs/6.6.3/rxjs.umd.min.js">
</script>

If the initial call is asynchronous, the observable will behave asynchronously.

const { Observable } = rxjs;

const helloEarth$ = new Observable(observer => {
  // simulating an ajax call
  setTimeout(() => {
    observer.next('Hello Earth from a galaxy far, far away...');
    observer.complete();
  }, 1000);
});

console.log('Before subscribing helloEarth$');

helloEarth$.subscribe({
  next: console.log,
  complete: () => console.log('helloEarth$ on complete')
});

console.log('After subscribing helloEarth$');

<script src="//cdnjs.cloudflare.com/ajax/libs/rxjs/6.6.3/rxjs.umd.min.js">
</script>

How can Observables be designed to exhibit both synchronous and asynchronous behavior?

Answer №1

Similar questions

Error: Uncaught TypeError in Ajax function definition

Using PHP to display a message box and redirecting to a different webpage

Collaborate on a component used in multiple modules

I aim to continuously refresh a dynamic canvas line chart with JSON data

Understanding how the context of an Angular2 component interacts within a jQuery timepicker method

Having trouble with the Three.js OBJ loader in CodePen?

Is it possible to limit the items in a TypeScript array to only accept shared IDs with items in another array?

Error occurs in console when using .getJSON with undefined JSON, but does not happen when using embedded data

Incorporating object into main function of VueJS root component

What is causing the addListener function in the events class to malfunction?

Encountering the identical error message while attempting to execute my application: "Uncaught TypeError: this.microservicesModule.register is not a function."

The process of altering a grid in HTML and adding color to a single square

Trouble arises when extending an MUI component due to a TypeScript error indicating a missing 'css' property

What is the correct regex expression for validating decimal numbers between 1.0 and 4.5?

Removing an item from a table row cannot be completed due to the inability to retrieve the list_body ID necessary for deletion

Issue with template updating when utilizing ui-router and ion-tabs in Ionic framework

Use ng-repeat to extract information from an array and populate it into a datalist

What is the best way to structure time and avoid mentioning the server name?

What is the best way to send data from ajax to a django view?

Modifying the class of an HTML element using JavaScript