Promises vs Observable

Promise is eager, once they are initialized they trigger the underlying actions and returns the result
Observable is lazy, they don’t trigger until it has a subscriber.

Promises returns only one value
Observable can return multiple values overtime to its subscribers

Promise cannot be canceled, once a promise action is triggered it will execute and return the result
Observable can be canceled, we can call unsubscribe to stop receiving responses from the observable

Promises can be converted to observables, the RxJs library provides a from operator which can convert a promise to an observable. We can use this to deal with some legacy code that is returning promises.

import { from } from 'rxjs';
const myObservable = from(myPromise)

What are Observables

Observables provide a new way of passing data asynchronously between a publisher and a subscriber. Observables can be used to pass multiple values from a publisher to its subscribers over time.

A publisher creates an instance of Observable and defines a subscribe() function. When a subscriber subscribes to the publisher this function will get executed. The function will not get executed till a subscriber subscribers.

Observables are like an array of items which are delivered to the subscribers over a period of time. Angular uses observables internally in its event system and in the Http service. Observables are not built into Angular, instead Angular uses a library RxJs to implement observables.

Promises can also be used to make asynchronous Http calls. The advantage of observables over promises is that promise can deliver only one value, while observables can deliver a list of values over time. Also promises cannot be cancelled once initiated, while observables can be cancelled at any time.

Observable example in Angular 6

An Observable is a way to execute asynchronous operations, in Angular Observable is supported using the RxJs library. An Observable makes an asynchronous request and returns the success response or an error if the request fails. The most common usage of observable is to make API calls to services to get data. Let us see on how to make async calls using observable to get data and display it in UI using Angular.

The Angular HttpClient library by default gives an Observable, let us use the Observable to get API data and display the results in the Component UI.

Let us extend our previous Promise example, we will use the same userdata.service from the previous example and add an Observable to it. This way we can compare the Promise and Observable in the same example code.

Promise example in Angular 6

A Promise is a way to execute asynchronous operations. A Promise can give 2 possible results a success response or a failure error message. The most common usage of promises is to make API calls to services to get data. Let us see on how to make async calls using promises to get data and display it in UI using Angular.

The Angular HttpClient library by default gives an Observable, for the sake of this example we will convert the Observable to a Promise and use it in the Component to display the results from the API call.

Let us extend our previous Service example, let us start by adding a new service userdata.service using the ng generate command as follows.