Promise vs Observable: A Quick Comparison

When working with asynchronous programming in JavaScript, especially in modern web development using frameworks like Angular or libraries like RxJS, two key concepts often surface — Promises and Observables. While both deal with asynchronous data, they have fundamental differences in design, capabilities, and use cases.

This article offers a quick dive into Promises vs Observables, covering their differences, strengths, limitations, and when to use which.

1. Introduction to Promises

A Promise is a JavaScript object that represents the eventual completion (or failure) of an asynchronous operation and its resulting value.

Key Characteristics:

• Eager Execution: Promises are executed immediately upon creation.
• Single Value: A promise can only emit a single value or error.
• Immutable: Once a promise is settled (resolved or rejected), its state cannot be changed.
• Built-in: Promises are part of standard JavaScript (ES6 and later).

Basic Syntax:

const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Data fetched'), 1000);
});

promise.then(data => console.log(data));

2. Introduction to Observables

An Observable is a core type in RxJS (Reactive Extensions for JavaScript), a library for reactive programming. It allows the creation of a stream of values over time.

Key Characteristics:

• Lazy Execution: Observables are not executed until a subscriber subscribes to them.
• Multiple Values: Observables can emit multiple values over time.
• Cancellable: Subscriptions can be cancelled to stop the execution.
• Operators Support: RxJS provides a rich set of operators for data transformation, filtering, combining, etc.

Basic Syntax:

import { Observable } from 'rxjs';

const observable = new Observable(observer => {
  observer.next('First Value');
  observer.next('Second Value');
  setTimeout(() => {
    observer.next('Delayed Value');
    observer.complete();
  }, 1000);
});

observable.subscribe({
  next: value => console.log(value),
  complete: () => console.log('Completed')
});

3. Comparison Table: Promise vs Observable

4. Use Cases

When to Use Promises

• API calls that return a single response (e.g., fetch)
• Asynchronous tasks where only one result is expected
• Quick and simple asynchronous operations

When to Use Observables

• Handling streams of data (e.g., user inputs, WebSocket messages)
• Complex async scenarios requiring operators (debouncing, throttling, retries)
• Angular HTTP requests (via HttpClient) which return observables
• Reactive forms and events in Angular

5. Converting Between Promises and Observables

From Promise to Observable:

import { from } from 'rxjs';

const promise = fetch('https://api.example.com/data');
const observable = from(promise);

observable.subscribe({
  next: response => console.log(response),
  error: err => console.error(err)
});

From Observable to Promise:

import { firstValueFrom } from 'rxjs';

const observable = of('Hello Observable');
const promise = firstValueFrom(observable);

promise.then(value => console.log(value));

6. Error Handling

In Promises:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .catch(error => console.error('Error:', error));

In Observables:

observable.subscribe({
  next: data => console.log(data),
  error: err => console.error('Error:', err)
});

Observables provide better flexibility for error retries, fallback strategies, and detailed control over the error stream using operators like catchError, retry, retryWhen, etc.

7. Angular Context

In Angular, the HttpClient service returns Observables by default. This allows powerful features such as:

• Canceling ongoing HTTP requests (e.g., when navigating away)
• Using async pipe in templates
• Composing streams using RxJS operators

Despite this, Angular also supports converting observables to promises if needed.

Click here to learn about more intresting topics in Angular.

Conclusion

Both Promises and Observables are essential tools in the JavaScript ecosystem for managing asynchronous operations. While Promises are simple and suitable for single-value asynchronous calls, Observables shine when dealing with streams of data or complex event handling scenarios.

Understanding their differences helps in choosing the right abstraction based on the use case, and ultimately, writing more efficient and scalable applications.