Angular: Observable v/s Promise

Observables and Promises are both used to handle asynchronous operations in JavaScript, but they have some key differences:

Promises

• Single Value: Promises handle a single asynchronous event and return a single value (or error).
• Eager: Promises start executing immediately upon creation.
• Not Cancellable: Once a Promise is initiated, it cannot be cancelled.
• Syntax: Uses .then(), .catch(), and .finally() for chaining operations.

Example:

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

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

Observables

• Multiple Values: Observables can emit multiple values over time.
• Lazy: Observables do not start emitting values until they are subscribed to.
• Cancellable: Subscriptions to Observables can be cancelled, stopping the emission of values.
• Syntax: Uses .subscribe() to handle emitted values, errors, and completion.

Example:

import { Observable } from 'rxjs';

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

const subscription = observable.subscribe({
  next(value) {
    console.log(value);
  },
  complete() {
    console.log('Observable complete');
  }
});

// To cancel the subscription
subscription.unsubscribe();

When to Use Each

• Use Promises when you need to handle a single asynchronous operation.
• Use Observables when you need to handle multiple asynchronous events or values over time, and when you need more control over the data stream (e.g., cancellation, transformation).

---

Thank you for reading!
I hope you found this article helpful and informative. If you enjoyed it or learned something new, feel free to share your thoughts in the comments or connect with me.

If you'd like to support my work and help me create more content like this, consider buying me a coffee. Your support means the world and keeps me motivated!

Thanks again for stopping by! 😊

Comments

[mahdi]

While it's true that a Promise starts executing immediately upon creation, it's important to clarify that the execution happens asynchronously. The term "eager" can be misleading because it implies that the Promise blocks the main thread, but that's not the case. Promises do not block the main thread; they begin execution as soon as they are created, but they resolve asynchronously—meaning the callback functions (.then(), .catch(), etc.) are queued to run later when the JavaScript event loop is free.

For example:

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

console.log('Promise created');
promise.then(value => console.log(value));

In this case, the Promise starts executing as soon as it’s created, but the resolve() function waits for 1 second before returning the value asynchronously.

[Ankush Goyal]

Thank you for your insightful comment! You are absolutely correct that Promises in JavaScript start executing immediately upon creation, but they do so asynchronously.