Angular Promises Versus Observables: Understanding and Choosing the Right Approach

In Angular, asynchronous operations are fundamental for fetching data, handling user interactions, and managing various aspects of a web application. Two primary ways to handle asynchronous operations are Promises and Observables. In this blog post, we’ll explore Angular Promises and Observables, understand their differences, and provide examples to help you choose the right approach for your needs.

If you want to learn one more angular feature, you can refer here.

Promises: A Quick Overview

Promises are a widely used mechanism for handling asynchronous operations in JavaScript. They represent a value that may be available now, in the future, or never. It has three states:

1. Pending: The initial state, indicating that the asynchronous operation is in progress.
2. Fulfilled: The state where the operation has been successfully completed, and a value is available.
3. Rejected: The state where the operation has failed, and an error reason is available.

Example: Using Promises

Here’s an example of fetching data using a Promise in Angular:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class DataService {
  constructor(private http: HttpClient) {}

  fetchData(): Promise<any> {
    return this.http.get('https://jsonplaceholder.typicode.com/posts/1').toPromise();
  }
}

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-promise-example',
  template: `
    <div *ngIf="data">
      <h2>Data: {{ data.title }}</h2>
    </div>
  `,
})
export class PromiseExampleComponent {
  data: any;

  constructor(private dataService: DataService) {
    this.dataService.fetchData()
      .then((result) => {
        this.data = result;
      })
      .catch((error) => {
        console.error('Error:', error);
      });
  }
}

Observables: A Quick Overview

Observables are a more powerful and flexible approach to handling asynchronous operations, particularly when dealing with streams of data. It represent a sequence of values over time. They can emit multiple values and have multiple subscribers.

Example: Using Observables

Here’s an example of fetching data using Observables in Angular:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class DataService {
  constructor(private http: HttpClient) {}

  fetchData(): Observable<any> {
    return this.http.get('https://jsonplaceholder.typicode.com/posts/1');
  }
}

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-observable-example',
  template: `
    <div *ngIf="data$ | async as data">
      <h2>Data: {{ data.title }}</h2>
    </div>
  `,
})
export class ObservableExampleComponent {
  data$: Observable<any>;

  constructor(private dataService: DataService) {
    this.data$ = this.dataService.fetchData();
  }
}

Key Differences: Promises vs. Observables

Now that we’ve seen examples of both Promises and Observables, let’s highlight the key differences between them:

1. Single Value vs. Multiple Values: Promises resolve with a single value or reject with an error, whereas Observables can emit multiple values over time. This makes Observables more suitable for handling data streams.
2. Cancellation: Promises do not support cancellation, while Observables can be canceled by unsubscribing from them. This is especially useful for cleaning up resources when a component is destroyed.
3. Lazy vs. Eager: Promises are eager, meaning they start executing as soon as they are created. Observables are lazy, meaning they don’t execute until you subscribe to them. This allows you to control when and how many times the operation is performed.
4. Operators: Observables provide a rich set of operators (e.g., map, filter, mergeMap) that allow you to transform and manipulate data streams easily. Promises lack such operators.

Choosing Between Promises and Observables

Now that you understand the differences, how do you choose between Promises and Observables in your Angular application? Here are some guidelines:

1. Use Promises for Simplicity: If you have a one-time asynchronous operation, such as fetching data from an API, Promises are simpler and often more than sufficient.
2. Use Observables for Streams: If you’re dealing with streams of data, like user input events or data updates that may occur over time, Observables are the better choice. They provide more control and flexibility.
3. Consistency with APIs: Consider the API you are working with. Some APIs return Promises, while others return Observables. It’s often easier to stick with the same type throughout your application.
4. Complex Data Transformations: If you need to perform complex data transformations, filtering, or combining multiple data sources, Observables and their operators make these tasks easier.
5. Lifecycle Management: If you need to manage the lifecycle of an asynchronous operation (e.g., canceling requests when a component is destroyed), Observables provide better support.

Conclusion

Promises and Observables are both valuable tools for handling asynchronous operations in Angular applications. The choice between them depends on the nature of your task and the requirements of your application. Understanding the differences and capabilities of each will help you make informed decisions when dealing with asynchronous code in Angular.

Finally, for more such posts, please follow our LinkedIn page- FrontEnd Competency.