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.

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs