Difference between Promise and Observable

Introduction

When working with asynchronous programming in JavaScript and modern frameworks like Angular, developers often encounter Promises and Observables. Both are used to handle asynchronous operations such as HTTP requests, API calls, timers, and user events. Although they may seem similar at first, they differ significantly in behavior, capabilities, and use cases.

What is a Promise?

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

A Promise has three possible states:

• Pending
• Fulfilled (Resolved)
• Rejected

Note: Once a Promise is resolved or rejected, its state cannot change.

Promise Example

const promise = new Promise((resolve, reject) => { 
setTimeout(() => { 
resolve("Data received successfully"); 
}, 2000); }); 
promise.then(result => { 
console.log(result); 
}).catch(error => { 
console.log(error); 
});

Output:

What is an Observable?

An Observable is an object provided by the RxJS library that emits values over time.

Observables are heavily used in Angular applications.

import { Observable } from 'rxjs';

const observable = new Observable(observer => {

    observer.next("First Value");
    observer.next("Second Value");
    observer.next("Third Value");

    observer.complete();

});

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

Output:

Detailed Comparison of Promise vs Observable

1. Return Number of Values

Promise

A Promise returns only one value.

const promise = Promise.resolve("Hello");

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

Output:

Observable:

An Observable can return multiple values.

import { interval } from 'rxjs';

interval(1000).subscribe(value => {
    console.log(value);
});

Output:

2. Lazy vs Eager Execution

Promise

Promises execute immediately after creation.

const promise = new Promise(resolve => {
    console.log("Promise Started");
    resolve();
});

Output:

Note: Even if .then() is never called, the Promise executes.

Observable

Observable does nothing until someone subscribes.

const observable = new Observable(observer => {
    console.log("Observable Started");
    observer.next("Hello");
});

observable.subscribe();

Output:

Note: Without subscribe(), nothing happens.

3. Cancellation

Promise:

Promises cannot be cancelled once execution begins.

const promise = fetch('/api/users');

The request continues even if you don’t need the response.

Observable:

Observables can be cancelled.

const subscription = observable.subscribe(); 
subscription.unsubscribe();

4. Operators

Promise:

Promises support simple chaining.

fetch(url)
.then(response => response.json())
.then(data => console.log(data));

Observable:

Observables support hundreds of operators.

import { of } from 'rxjs';
import { map } from 'rxjs/operators';

of(1,2,3)
.pipe(
    map(value => value * 10)
)
.subscribe(console.log);

Output:

Advantages of Promise

1. Native JavaScript support
2. Easy to understand
3. Simple syntax
4. Ideal for one-time operations
5. Works well with async/await

Disadvantages of Promise

1. Only one value
2. Cannot be cancelled
3. Limited operators
4. Difficult to compose multiple asynchronous streams

Advantages of Observable

1. Multiple values
2. Lazy execution
3. Supports cancellation
4. Powerful RxJS operators
5. Easy data transformation
6. Excellent for Angular applications
7. Better memory management
8. Supports retry and error recovery

Disadvantages of Observable

1. Requires RxJS library
2. Slight learning curve
3. More complex than Promises for simple tasks

When to Use Promise

When to Use Observable

Difference between Observable vs Promise

Angular Promise vs Observable – Interview Questions

Angular Promise vs Observable – Objective Questions (MCQs)

Conclusion

Both Promises and Observables are powerful tools for managing asynchronous programming in JavaScript, but they serve different purposes.

A Promise is ideal for single asynchronous results and integrates seamlessly with async/await, making it a great choice for straightforward tasks.

Observables, on the other hand, provide advanced capabilities such as multiple value emissions, lazy execution, cancellation, and a rich set of RxJS operators, making them the preferred option for Angular applications and real-time data streams.

Related Angular Promise vs Observable Tutorials