Converting an HTTP service Observable into a ZoneAwarePromise in Angular 9

In Angular, the RxJS asynchronous observables are first-class citizens and much of the core toolkit has been configured to rely upon them. Nonetheless, it is still valuable to be able to have conversion between them, especially since they have similar duties.

Getting ready

You’ll begin with the following simplistic application:

[app/article.component.ts] 
 
import {Component} from '@angular/core'; 
import {Http} from '@angular/http'; 
 
@Component({ 
  selector: 'article', 
  template: ` 
    <p></p> 
  ` 
}) 
export class ArticleComponent { 
  constructor(private http:Http) { 
    // For demo purposes, have this plunk request itself to 
    // avoid cross origin errors 
    console.log( 
      http.get('//run.plnkr.co/plunks/TBtcNDRelAOHDVpIuWw1')); 
  } 
} 
 
// Observable {...} 

Suppose your goal was to convert this HTTP call to use promises instead.

How to do?

For the purposes of this tutorial, you don’t really need to understand any details about the http service or RxJS asynchronous observables. All that you need to know is that any method exposed by the http service will return an observable. Happily, the RxJS implementation can expose a .toPromise() method that converts the observable into its equivalent Promise object:

[app/article.component.ts] 
 
import {Component} from '@angular/core'; 
import {Http} from '@angular/http'; 
import 'rxjs/Rx'; 
 
@Component({ 
  selector: 'article', 
  template: ` 
    <p></p> 
  ` 
}) 
export class ArticleComponent { 
  constructor(private http:Http) { 
    // For demo purposes, have this plunk request itself to 
    // avoid cross origin errors 
    console.log( 
      http.get('//run.plnkr.co/plunks/TBtcNDRelAOHDVpIuWw1') 
      .toPromise()); 
  } 
} 
 
// ZoneAwarePromise {...} 

How the above code work?

The HTTP service, by default, returns an observable; however, without the imported Rx module, this will throw an error, saying it cannot find the toPromise() method.

The Rx module confers to an observable the ability to convert itself into a promise object. Angular 9 is intentionally not utilizing the Observable spec with all the RxJS operators to allow you to specify exactly which ones you want. Because the operators exist as separate modules, this leads to a smaller payload sent to the browser.

Once the .toPromise() method is invoked, the object is created to a ZoneAwarePromise instance.

Note: This sounds gnarly, but really, it’s just wrapping the Promise implementation as zone.js so that the Angular zone is aware of any actions the Promise could cause that it should be aware of. For your purposes, this can be treated as a regular Promise.

Muhammad Mubeen

Muhammad Mubeen

Mubeen is a full-stack web & mobile app developer who is very proficient in MEAN.js, Vue, Python, Ionic 4, Flutter, Firebase, ROR, and PHP. He has created multiple mobile and web applications. He is very passionate about sharing his knowledge.

Leave a Reply

Your email address will not be published. Required fields are marked *

Trending