What Is the Difference Between Observable and Promise
💡 Concept Name
Observable vs Promise – Two approaches to handling asynchronous operations in JavaScript and Angular, differing in execution model, features, and flexibility.
📘 Quick Intro
While both Observables and Promises help manage asynchronous data, Observables (from RxJS) offer more powerful, flexible features such as multiple emissions, cancellation, and operators, whereas Promises are simpler and resolve once.
🧠 Analogy / Short Story
A Promise is like ordering a meal once—it delivers a single result. An Observable is like subscribing to a magazine—it delivers multiple issues over time, and you can unsubscribe anytime.
🔧 Technical Explanation
- 🔁 Observables support multiple values over time; Promises resolve once.
- 🕒 Promises are eager—start immediately. Observables are lazy—start on subscription.
- 🔄 Observables can be canceled via
unsubscribe(); Promises cannot be canceled. - 🔌 Observables offer rich operators like
map,filter,retry, etc. - 🔗 Angular’s HttpClient returns Observables by default for better stream control.
🎯 Purpose & Use Case
- ✅ Use Promise for one-time async operations like file read or basic API call.
- ✅ Use Observable for streams like real-time updates, UI events, or HTTP retries.
- ✅ Use RxJS operators to transform, debounce, or merge data streams.
💻 Real Code Example
// Using Promise
getUserData(): Promise<any> {
return fetch('/api/user').then(res => res.json());
}
// Using Observable (RxJS)
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
constructor(private http: HttpClient) {}
getUserData(): Observable<any> {
return this.http.get('/api/user');
}
// Subscribing to Observable
this.getUserData().subscribe(data => console.log(data));
❓ Interview Q&A
Q1: Can Observables emit multiple values?
A: Yes, unlike Promises which resolve only once.
Q2: Are Promises cancellable?
A: No, once initiated, they run to completion.
Q3: Which is lazy: Promise or Observable?
A: Observables are lazy and only execute when subscribed.
Q4: Which Angular module returns Observables?
A: HttpClient module.
Q5: When would you prefer a Promise over an Observable?
A: For simple, one-time asynchronous actions without stream complexity.
📝 MCQs
Q1. Which emits multiple values over time?
- Promise
- Observable
- Callback
- None
Q2. Which one is lazy?
- Promise
- Observable
- Both
- Neither
Q3. Which has unsubscribe() functionality?
- Promise
- Observable
- Async/Await
- Callback
Q4. Which Angular API returns Observables?
- Router
- Forms
- HttpClient
- CommonModule
Q5. What is returned by fetch() in JS?
- Observable
- Promise
- Callback
- Subject
Q6. Which has richer chaining operators?
- Promise
- Observable
- Both
- None
Q7. What is the default state of a Promise?
- Resolved
- Rejected
- Cancelled
- Pending
Q8. Which is used with subscribe()?
- Promise
- Observable
- Callback
- SetTimeout
Q9. Can Observables be canceled?
- No
- Yes
- Only in Angular
- Only with retry()
Q10. Which is better for real-time updates?
- Promise
- Observable
- AsyncPipe
- EventEmitter
💡 Bonus Insight
Use Angular's async pipe in templates with Observables to auto-subscribe and manage cleanup. This eliminates manual subscriptions and improves performance.
📄 PDF Download
Need a handy summary for your notes? Download this topic as a PDF!