Promise vs Observable in Angular: What’s the Difference?

If you find this story helpful, feel free to like or share it with others!

---

I’m at a beach, relaxing and waiting for the perfect wave. I have two friends, Promise and Observable, each offering a unique way to enjoy this experience.

Promise is like a dedicated lifeguard. When I ask for help, Promise gives me a single, definitive answer. If I tell Promise to look out for the next big wave, Promise watches the horizon intently. The moment the wave arrives, Promise blows a whistle and signals to me, “Here it is, the wave you’ve been waiting for!” It’s a one-time notification, no matter how many waves follow. Once Promise delivers the message, the job is done, and I can’t ask for another wave unless I call Promise again.

On the other hand, Observable is like a friendly seagull with a keen eye on the ocean. Observable circles above me, continuously observing the water. When I’m ready, I tune into Observable’s calls. Each time a wave appears, Observable squawks, “Another wave is here!” and keeps informing me about each new wave as they roll in. With Observable, I have the flexibility to start or stop listening at my convenience, and I can adjust my focus based on the changing tide.

While Promise gives me a guaranteed single alert, like a one-time lifeguard whistle, Observable offers an ongoing stream of updates, like my seagull friend’s continuous calls. Depending on whether I need just one wave or want to track them all, I choose which friend to rely on. That’s how Angular handles these two in the vast ocean of asynchronous programming!

---

Promise Example:

In Angular, using a Promise is straightforward when you need a single response. I want to fetch data from an API endpoint:

fetchData(): Promise<any> {
  return this.httpClient.get('https://api.example.com/data').toPromise();
}

this.fetchData().then(data => {
  console.log('Data received:', data);
}).catch(error => {
  console.error('Error fetching data:', error);
});

Here, I call fetchData(), and once the data is fetched, the Promise resolves, and I handle the result in the .then() method. If something goes wrong, I catch it in the .catch() method. It’s like our lifeguard Promise, who signals just once when the wave arrives.

Observable Example:

Now, if I want continuous updates, I switch to an Observable:

fetchData(): Observable<any> {
  return this.httpClient.get('https://api.example.com/data');
}

const subscription = this.fetchData().subscribe(data => {
  console.log('Data received:', data);
}, error => {
  console.error('Error fetching data:', error);
});

// Later, if I want to stop receiving updates
subscription.unsubscribe();

With Observables, I subscribe to fetchData(), and every time new data comes in, I get notified. If I no longer want updates, I can unsubscribe, much like choosing when to listen to the seagull’s calls.

Key Takeaways:

1. Single vs. Multiple Responses: Promises handle a single asynchronous event, while Observables can handle multiple events over time.
2. Flexibility: With Observables, I can start and stop listening at any time, offering more flexibility for ongoing data streams.
3. Angular Integration: Angular’s HttpClient supports both Promises and Observables, but Observables are the default for handling HTTP requests, making them powerful for real-time applications.