The Tech Platform

Apr 25, 20222 min

Difference Between JavaScript Promises and JavaScript Observable

Updated: Jun 2, 2023

What are JavaScript Promises?

JavaScript Promises are used to handle asynchronous operations in JavaScript. They are easy to manage when dealing with multiple asynchronous operations where callbacks can create callback hell leading to unmanageable code.

A JavaScript Promise object can be:

  • Pending

  • Fulfilled

  • Rejected

The Promise object supports two properties: state and result. While a Promise object is "pending" (working), the result is undefined. When a Promise object is "fulfilled", the result is a value. When a Promise object is "rejected", the result is an error object.

Syntax:

let myPromise = new Promise(function(myResolve, myReject)
 {
 
 // "Producing Code" (May take some time)
 
  myResolve(); // when successful
  myReject(); // when error
 });
 
 // "Consuming Code" (Must wait for a fulfilled Promise)
 myPromise.then(
 function(value) { /* code if successful */ },
 function(error) { /* code if some error */ }
 );

Code:

<!DOCTYPE html>
 <html>
 <body>
 
 <h2>JavaScript Promise</h2>
 
 <p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>
 
 <h1 id="demo"></h1>
 
 <script>
 const myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function(){ myResolve("The Tech Platform"); }, 3000);
 });
 
 myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
 });
 </script>
 
 </body>
 </html>

Output:

What is JavaScript Observable?

Observable JavaScript represents a progressive way of handling events, async the activity, and multiple values in JavaScript. These observables are just the functions that throw values and Objects known as observers subscribe to such values that define the callback functions such as error(), next() and complete(). These objects are passed as arguments to observable functions and these observable functions call observer methods based on the HTTP requests, events, etc. This allows the observer to “listen” for state change emitted by observable function. Here, we shall see in depth and how it is implemented with few examples.

Syntax:

import { Observable } from 'rxjs';

Code:

import { Observable } from 'rxjs';
 let observable = new Observable(observer => {
 setTimeout(() => {
 observer.next('Hi This will invoke Observables')
 },5000)
 console.log('Observables invoked!');
 });
 observable.subscribe();

Output:

Difference Between JavaScript Promise and Observable

Note: JavaScript Observables are typically associated with libraries like RxJS, which provide additional functionalities and operators for working with observables.

JavaScript Promises and JavaScript Observables serve different purposes in handling asynchronous operations and data streams:

  • Promises are suitable for handling a single future value or event. They are executed immediately upon creation, resolve to a single value, and handle asynchronous operations. Promises are ideal for scenarios where you expect a single result or need to chain asynchronous operations.

  • Observables, often associated with libraries like RxJS, represent a stream of multiple values or events. They can emit multiple values over time and handle both synchronous and asynchronous operations. Observables are useful for scenarios where you have continuous data streams, such as real-time updates or user interactions.

Both Promises and Observables offer error-handling mechanisms, but Observables provide additional features like backpressure handling and the ability to cancel subscriptions. Promises are simpler to use and have native support in JavaScript, while Observables provide more advanced capabilities and a rich set of operators for manipulating data streams.

    0
    0