Don’t Keep Your Promises: Use Observables

Observables are the preferred way of handling asynchronous events in Angular 2. This is certainly an upgrade in my opinion, and I will demonstrate the advantages in this post.

We will create an Angular service which will have a method that fetches Gmail messages from a particular sender. We are using the TypeScript definition file for the Google API client library that you can get from the DefinitelyTyped project.

With Promises

First I’ll show you an implementation of the service using promises to handle all of the asynchronous network requests.

First stab at the Gmail service, using promises

In the service, there is one publicly exposed method that the user of the service would call to fetch all of the emails received from the provided email address. There are also a few private helper methods to assist the public method.

As you can see, the getMessagesFromUser method becomes lengthy and complicated as the result of having to deal with multiple promises. It first loads the Gmail API. After that resolves, it makes a request to the Gmail API to get the references to the email objects. The method then creates an array of promises where each one resolves with the actual email object returned from the Gmail API. After that a new promise has to be created, which will resolve with an array of decoded message bodies since the messages returned from the API are Base64 encoded.

This is a demonstration of how working with promises can get unwieldy rather quickly.

With Observables

Enter observables! We’ll be using rxjs, the reactive programming library written in TypeScript.

Now we’ll refactor the service by changing everything to use observables instead of promises.

Using observables instead of promises

The getMessagesFromUser method has shaved off some lines, and it’s clearer to see what’s going on.

We have changed all of the private helper methods to return observables instead of promises. The fromPromise method of the observables library is a convenient way to turn any promise into an observable.

First the getMessagesFromUser method sets up an observable that will emit the email address of the sender. Once the email address is emitted, it makes a request to get all of the email references. The flatMap function is used to return a stream of emitted values instead of a stream of streams. It then uses concatMap to grab what we care about from the response, which are the message references. It then maps over the message references and makes a request for each message. Finally the method decodes each message body and wraps all the messages up in an array, so that the observable emits an array instead of emitting each decoded message individually.

Here’s an example usage of the service:

An Angular 2 component using the Gmail service

Using observables instead of promises might initially feel foreign, but it will clean up complicated asynchronous operations once you get the hang of it. It might even make things pleasant!