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

Programmatically simulate a text cursor activation as if the user has physically clicked on the input

Is it best practice to initialize loaded scripts before the JQuery .load callback is called or should it be done after the .ready callback in the loaded script?

Tips for distinguishing the beginning and ending points of wrapped text in the Firefox browser

What are the steps for updating an NPM package that was installed from a Git repository?

Encountering a Problem When Exporting a Class Using Require

The jQuery ajax function is malfunctioning when set to synchronous mode

Using a split string to destructure an array with a mix of let and const variables

When attempting to execute "nodemon," the command was not detected

Leveraging Node.js alongside a Spring backend

Displaying that the response from ajax is experiencing issues

Steps to create a conditional AJAX request triggered by the onbeforeload event depending on the value of a variable

Pulling the month name based on a specific year and week using Javascript

Altering the hue of various stroke patterns

I am looking to dynamically load a script only after retrieving specific data from a JSON file in Next.js

Errors encountered when attempting to update Angular from version 5 to version 6

What is the proper way to utilize the ES6 import feature when using a symbolic path to reference the source file?

What steps can I take to prevent already selected options from being chosen in a Vue.js HTML form?

The Owl carousel animation fails to work in Chrome browser

Ways to verify the element prior to the completion of the request?

Separating Angular code into distinct components