DEV Community

Md. Khalid Hossen
Md. Khalid Hossen

Posted on

Difference between promise and observable

Promises and Observables are both used to handle asynchronous operations in JavaScript, but they have key differences in how they work and their capabilities. Here's a breakdown:

Promises

Definition: A Promise represents a single future value or the eventual completion (or failure) of an asynchronous operation.

Execution: A Promise is eager, meaning it executes immediately when created.

Value Handling: A Promise can only handle a single value or error. Once resolved or rejected, it cannot emit multiple values.

Chaining: You can chain .then() and .catch() methods to handle the resolved value or error.

Cancellation: Promises cannot be canceled once they are initiated.

Use Case: Ideal for one-time asynchronous operations like fetching data from an API.

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

promise.then((result) => console.log(result)); // Output: "Data fetched!"
Enter fullscreen mode Exit fullscreen mode

Observables

Definition: An Observable represents a stream of values over time. It can emit multiple values, errors, or a completion signal.

Execution: Observables are lazy, meaning they only execute when you subscribe to them.

Value Handling: Observables can emit multiple values over time, making them suitable for handling streams of data (e.g., user input, WebSocket messages).

Chaining: You can use operators like map, filter, and merge to transform or combine streams.

Cancellation: Observables can be canceled using the unsubscribe() method, which stops the stream.

Use Case: Ideal for handling continuous or multiple asynchronous events, such as real-time data streams or user interactions.

import { Observable } from 'rxjs';

const observable = new Observable((subscriber) => {
  subscriber.next("First value");
  setTimeout(() => subscriber.next("Second value"), 1000);
  setTimeout(() => subscriber.complete(), 2000);
});

const subscription = observable.subscribe({
  next: (value) => console.log(value), // Output: "First value", then "Second value"
  complete: () => console.log("Completed!"),
});

subscription.unsubscribe(); // Cancel the subscription
Enter fullscreen mode Exit fullscreen mode

When to Use Which?

  • Use a Promise when you need to handle a single asynchronous operation (e.g., fetching data from an API).
  • Use an Observable when dealing with multiple values over time or continuous streams of data (e.g., real-time updates, user input events).

Observables are more powerful and flexible, but Promises are simpler and sufficient for many use cases.

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay