Converting Promises to Observables in Angular- Practical Use Case

When working with asynchronous operations in Angular, you’ll often come across Promises and Observables. Promises are used to handle single asynchronous events, while Observables are ideal for handling sequences of events over time. In this blog post, we’ll explore various techniques for converting Promises to Observables in an Angular application.

Understanding Promises and Observables

Before diving into conversion techniques, let’s briefly review what Promises and Observables are and when to use each:

• Promises represent a single asynchronous value. They are most suitable for operations that produce one result, like HTTP requests or database queries.

• Observables, on the other hand, are more versatile. They represent a sequence of values over time, making them ideal for handling real-time data, user interactions, and event streams.

Angular primarily uses Observables, especially when working with the Angular HttpClient module for HTTP requests. However, you may encounter situations where you need to convert a Promise into an Observable. This is particularly useful when dealing with third-party libraries or integrating with code that relies on Promises.

Technique 1: Using from

The simplest way to convert a Promise to an Observable in Angular is by using the from function from the RxJS library. Let’s walk through an example:

import { Component, OnInit } from '@angular/core';
import { from } from 'rxjs';
import { ApiService } from './api.service';

@Component({
  selector: 'app-root',
  template: `
    <div *ngFor="let post of fetchedData">
      <h3>{{ post.title }}</h3>
      <p>{{ post.body }}</p>
    </div>
  `,
})
export class AppComponent implements OnInit {
  constructor(private apiService: ApiService) {}
  fetchedData: any;

  ngOnInit(): void {
    const promise = this.apiService.fetchDataAsPromise();
    const observable = from(promise);

    observable.subscribe(
      (data) => {
        this.fetchedData = data;
        console.log(data);
      },
      (error) => {
        console.error(error);
      }
    );
  }
}

Here’s what’s happening in this code:

1. We import the from function from ‘rxjs’ to create an Observable from a Promise.

2. Inside the ngOnInit method, we obtain a Promise from the fetchDataAsPromise method of our ApiService.

3. We use from(promise) to convert this Promise into an Observable.

4. Finally, we subscribe to the Observable and handle the resolved data in the success callback and errors in the error callback.

This is a straightforward and commonly used technique for converting Promises to Observables in Angular.

Technique 2: Using Observable.create

Another way to convert Promises to Observables is by using the Observable.create method. This approach offers more control over the Observable’s behavior. Here’s an example:

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { ApiService } from './api.service';

@Component({
  selector: 'app-root',
  template: `
    <div *ngFor="let post of fetchedData">
      <h3>{{ post.title }}</h3>
      <p>{{ post.body }}</p>
    </div>
  `,
})
export class AppComponent implements OnInit {
  constructor(private apiService: ApiService) {}
  fetchedData: any;

  ngOnInit(): void {
    const observable = new Observable((observer) => {
      this.apiService.fetchDataAsPromise()
        .then((data) => {
          observer.next(data); // Emit the resolved data
          observer.complete(); // Complete the observable
        })
        .catch((error) => {
          observer.error(error); // Emit an error if there's a problem
        });
    });

    observable.subscribe(
      (data) => {
        this.fetchedData = data;
        console.log(data);
      },
      (error) => {
        console.error(error);
      }
    );
  }
}

Here’s what’s happening in this code:

1. We import the Observable class from ‘rxjs’ to create an Observable.

2. Inside the ngOnInit method, we create a new Observable using new Observable(...). The constructor function takes an observer as its parameter.

3. Within the observer function, we call this.apiService.fetchDataAsPromise() to fetch data as a Promise. We use .then to handle the resolution of the Promise and .catch to handle any errors.

4. Inside the .then block, we use observer.next(data) to emit the resolved data, and then we call observer.complete() to complete the Observable.

5. If an error occurs in the Promise’s .catch block, we use observer.error(error) to emit an error.

This approach provides finer-grained control over emissions and completion of the Observable, making it suitable for more complex scenarios.

Technique 3: Using fromPromise Function

You can also use the fromPromise function from RxJS to directly convert a Promise to an Observable. Here’s an example:

import { Component, OnInit } from '@angular/core';
import { fromPromise } from 'rxjs';
import { ApiService } from './api.service';

@Component({
  selector: 'app-root',
  template: `
    <div *ngFor="let post of fetchedData">
      <h3>{{ post.title }}</h3>
      <p>{{ post.body }}</p>
    </div>
  `,
})
export class AppComponent implements OnInit {
  constructor(private apiService: ApiService) {}
  fetchedData: any;

  ngOnInit(): void {
    const observable = fromPromise(this.apiService.fetchDataAsPromise());

    observable.subscribe(
      (data) => {
        this.fetchedData = data;
        console.log(data);
      },
      (error) => {
        console.error(error);
      }
    );
  }
}

Here’s how this code works:

1. We import the fromPromise function from ‘rxjs’ to create an Observable from a Promise.

2. Inside the ngOnInit method, we directly use fromPromise(this.apiService.fetchDataAsPromise()) to convert the Promise returned by fetchDataAsPromise into an Observable.

3. We then subscribe to the Observable, just like in the previous examples, handling the resolved data in the success callback and errors in the error callback.

This method is concise and commonly used when converting Promises to Observables in Angular applications that use RxJS.

Technique 4: Using defer

The defer function from RxJS is another powerful way to create Observables, allowing you to execute a function lazily when a subscription is made. Here’s an example:

import { Component, OnInit } from '@angular/core';
import { defer } from 'rxjs';
import { ApiService } from './api.service';

@Component({
  selector: 'app-root',
  template: `
    <div *ngFor="let post of fetchedData">
      <h3>{{ post.title }}</h3>
      <p>{{ post.body }}</p>
    </div>
  `,
})
export class AppComponent implements OnInit {
  constructor(private apiService: ApiService) {}
  fetchedData: any;

  ngOnInit(): void {
    const observable = defer(() => this.apiService.fetchDataAsPromise());

    observable.subscribe(
      (data) => {
        this.fetchedData = data;
        console.log(data);
      },
      (error) => {
        console.error(error);
      }
    );
  }
}

Here’s what’s happening in this code:

1. We import the defer function from ‘rxjs’ to create an Observable that defers the execution of the provided function until a subscription is made.

2. Inside the ngOnInit method, we use defer(() => this.apiService.fetchDataAsPromise()) to defer the execution of fetchDataAsPromise until someone subscribes to the resulting Observable.

3. We then subscribe to the Observable as usual, handling the resolved data in the success callback and errors in the error callback.

The defer function is a powerful way to create Observables because it allows you to execute a function lazily when a subscription is made. This can be useful when dealing with Promises, especially when you want to ensure that the Promise is only created and executed when it’s needed.

Conclusion

In Angular, you’ll often encounter the need to convert Promises to Observables, whether you’re working with HTTP requests, third-party libraries, or legacy code. Each of the techniques discussed in this blog post has its use cases, so choose the one that best suits your specific scenario.

By understanding these conversion techniques, you’ll have the flexibility to work with both Promises and Observables seamlessly, enabling you to build responsive and reactive Angular applications.