What is the difference between Observable and Promise in RxJS?

Core Differences

Observable and Promise are both tools for handling asynchronous operations, but they have significant differences in design philosophy and usage:

1. Execution Timing

Promise: Executes immediately upon creation, cannot be cancelled

javascript
const promise = new Promise((resolve) => {
  console.log('Promise executes immediately');
  resolve('done');
});

Observable: Only executes when subscribed, can be unsubscribed

javascript
const observable = new Observable((observer) => {
  console.log('Observable executes on subscription');
  observer.next('data');
});

observable.subscribe();

2. Data Flow

Promise: Can only emit one value, then completes or fails

javascript
promise.then(value => console.log(value)); // Receives only one value

Observable: Can emit multiple values, continuously pushes data over time

javascript
observable.subscribe(value => console.log(value)); // Can receive multiple values

3. Cancellability

Promise: Cannot be cancelled, once created it executes to completion

javascript
const promise = fetch('/api/data');
// Cannot cancel this request midway

Observable: Can cancel subscription via unsubscribe()

javascript
const subscription = observable.subscribe();
subscription.unsubscribe(); // Cancel subscription

4. Operator Support

Promise: Only chain calls then/catch/finally

javascript
promise
  .then(data => processData(data))
  .then(result => console.log(result))
  .catch(error => handleError(error));

Observable: Rich operator ecosystem

javascript
observable
  .pipe(
    map(data => processData(data)),
    filter(result => result.isValid),
    catchError(error => handleError(error))
  )
  .subscribe();

5. Lazy Loading vs Eager Loading

Promise: Eager execution, starts working when created Observable: Lazy loading, doesn't start executing until subscribed

6. Synchronous/Asynchronous

Promise: Always asynchronous Observable: Can be synchronous or asynchronous

Practical Use Cases

Scenarios for Using Promise

• Single asynchronous operation
• No cancellation needed
• Only need one result
• Simple asynchronous flow

Scenarios for Using Observable

• Need to handle multiple values
• Need to cancel operations
• Complex data flow processing
• Event handling
• WebSocket connections
• Real-time data streams

Performance Considerations

Observable provides better performance and flexibility when handling complex asynchronous flows, especially in scenarios requiring multiple asynchronous operations or cancellation. Promise is more suitable for simple asynchronous operations with cleaner and more intuitive code.