Difference between Promises and Observables.

#javascript #angular #webdev #programming

Promises and observables are both mechanisms for handling asynchronous operations in JavaScript, but they have some differences in terms of functionality and behavior.

A Promise is an object that represents the eventual completion or failure of an asynchronous operation and its resulting value. It is used to handle a single asynchronous event. When a promise is created, it is in one of three states: pending, fulfilled, or rejected. A pending promise is in an initial state, and it transitions to either fulfilled (resolved) or rejected (with an error) when the asynchronous operation completes. Promises are typically used with the .then() and .catch() methods to handle the fulfillment or rejection of the promise.

Example:

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Operation completed successfully');
  }, 1000);
});

promise.then((result) => {
  console.log(result);
}).catch((error) => {
  console.error(error);
});

An Observable, on the other hand, is a more powerful and flexible construct introduced in the RxJS library, which extends the concept of promises. Observables represent a stream of values over time, allowing multiple asynchronous events to be handled. They can emit zero or more values and also notify about errors or the completion of the stream. Observables are used with various operators and subscription mechanisms to handle these events.

Example:

import { Observable } from 'rxjs';

const observable = new Observable((observer) => {
  setTimeout(() => {
    observer.next('First value');
  }, 1000);

  setTimeout(() => {
    observer.next('Second value');
  }, 2000);

  setTimeout(() => {
    observer.next('Third value');
    observer.complete(); // Notify completion
  }, 3000);
});

const subscription = observable.subscribe(
  (value) => console.log(value),
  (error) => console.error(error),
  () => console.log('Observable completed')
);

// Later, if necessary, you can unsubscribe
subscription.unsubscribe();

Promises

Promises are a single value that is either resolved or rejected.
Promises are eager, meaning they are executed immediately when they are created.
Promises can only handle one value.
Promises can have multiple subscribers through multiple .then() calls.

Observables

Observables are a stream of values that can be resolved, rejected, or emit values.
Observables are lazy, meaning they are not executed until they are subscribed to.
Observables can handle multiple values.
Observables are multicast, meaning they can be subscribed to multiple times.

Differences between promises and observables:

Feature	Promises	Observables
Value Single	Single value	Stream of values
Execution	Eager	Lazy
Cancellation	Can not be canceled	Can be canceled
Multiple subscriptions	No	Yes
Error handling	Propagates errors to subscribers	Propagates errors to subscribers

Promises:

Making an API request
Waiting for a file to download
Opening a dialog box

Observables:

Streaming data from a server
Handling user input events
Listening for network events

Top comments (3)

Roy Lin • Dec 19

Promises are not multicast, meaning they can only be subscribed to once.

This sounds incorrect. Promises can have any number of receivers, which is the definition of multicast. A new promise is not created every time it is used (unlike standard observables). I.e. when you subscribe to a promise (using .then()), it will not re-run the promise, but will return you the 'calculated' value.