JavaScript Promises vs RxJS Observables

Posted By : Chandan Gupta | 12-Aug-2020

In this blog post, we compare JavaScript Promises and RxJS Observables on the key parameters and highlight their differences and similarities.

 

Note that if you want to run the following code examples that include observables, you have to install and import the RxJS library.

 

You can install RxJS as follows:

npm install --save rxjs

And you can import the Observable constructor (that’s all you need for these examples) in your code files as follows:

import { Observable } from 'rxjs';

However, if you use Node.js, you have to do the import in a different way as follows (because Node.js does not yet support the import statement):

const { Observable } = require('rxjs');

These import statements are omitted from all the following code snippets.

 

Creation (With Error Handling)

The above examples didn’t yet show the full capabilities of promises and observables. Errors may occur during the execution of a promise/observable, and both techniques provide means to indicate such errors to the code that “uses” them.

The following extends the above explanations with error handling capabilities.

 

Promises:

new Promise(executorFunc);function executorFunc(resolve, reject) {
    // Some code...
    resolve(value);
    // Some code...
    reject(error);
}

The executor function that you pass to the Promise constructor gets actually a second argument, which is the reject function. The reject function is used to indicate an error in the promise execution. When you call it, the executor function is aborted and the promise is transferred to the rejected state.

On the usage side, this will cause the onRejected function (that you may pass to the catch method) to be executed.

 

Observables:

new Observable(subscriberFunc);function subscriberFunc(observer) {
    // Some code...
    observer.next(value);
    // Some code...
    observer.error(error);
}

 

The observer object that is passed as argument to the subscriber function actually has one more method: the error method. Calling this method indicates an error to the subscriber of the observable.

Unlike next, calling the error method also terminates the subscriber function, and thus terminates the observable. This means that error can be called at most one time during the lifetime of an observable.

next and error are still not the entire truth. The observer object that is passed to the subscriber function has one more method: complete. Its usage is shown in the following:

new Observable(subscriberFunc);function subscriberFunc(observer) {
    // Some code...
    observer.next(value);
    // If there is an error...
    observer.error(error);
    // If all successful...
    observer.complete();
}

 

The complete method is supposed to be called when an observable successfully “completes”. Completing means that there is no more work to, that is, all values have been emitted. Like the error method, the complete method terminates the execution of the subscriber function, which means that the complete method can be called at most one time during the lifetime of an observable.

 

Note that calling the conplete method of an observable execution is recommended, but not mandatory.

 

We are a 360-degree SaaS app development company that provides end-to-end software development services with a focus on next-gen technologies. Our development team specializes in using JavaScript technologies like Angular, Node, and ReactJS to build scalable, responsive, and feature-rich web applications. We also have a dedicated team of Full Stack developers that are capable of performing both frontend and backend tasks. Our SaaS application development services address your mission-critical project requirements through high-quality web and mobile applications that are easy to scale. 

 

#SaaSAppDevelopmentCompany #SoftwareDevelopmentServices #FullStackDevelopers #SaaSApplicationDevelopmentServices

About Author

Author Image
Chandan Gupta

Chandan is a Frontend Developer with good experience in his domain. He Believes in smart work and loves to play with codes. He is good in programming.

Request for Proposal

Name is required

Comment is required

Sending message..