Tuesday, March 24, 2020

Difference between ES6 Promise and RXJS Observable in javascript with examples

This blog covers the difference between observable and Promises observable and promises in Javascript with examples.

observable and promises are used to handle the asynchronous calls in a javascript. This will be helpful to consume the rest API calls in front end applications like angular, react and vuejs as well as server-side applications with node environment.
Promises are inbuilt features introduced in ES6 or ES2015 for handling asynchronous operations Observable is a class in the RXJS library which is mainly used to handle multiple asynchronous calls and needs cancellation during operations.

ES6 Promises not cancellable 

 These are mainly used to avoid callback hell. Promises to handle single events and single results. if the operation is successful, means promise resolved, The result is a value else operation throws an error message, promise reject, the result is an error message ES6 Promises are not cancellable. The promise is useful for single async operations which are not cancellable First promises are declared using new Promise, provide the synchronous code inside.
var myproimse = new Promise((resolve, reject) => {
  if (success) {
    resolve("single object is returned");
  else {
    reject("Failure message"));
Once a promise is defined, you need to provide then and catch to catch success and error events.
promise.then((success) => console.log(success))      // single object is returned
       .catch((err) => console.log(error));    // Failure message
callback in then will be executed for promise resolve and catch will be executed for error messages.

 RXJS Observable are cancellable 

This works with multiple events in a stream of data flow These are button click events as an example, This will not be called until user-initiated action. The result is either success, failure and complete are the minimum events, but there are multiple events So we have to provide callbacks for each of these events.
 Here is an example of creating an observable defined with three events next event with value error event with failed message complete event without parameters
import { Observable } from 'rxjs';

const observableObject = new Observable(myobserver => {
observable object is subscribed using subscribe with three callbacks for success,error and complete
console.log('Start ');
  next(value) { console.log('next: ' + value); },
  error(err) { console.error('error: ' + err); },
  complete() { console.log('complete:'); }
and output is
next: successvalue
error: failed

Difference between ES6 Promise and RXJS Observable in javascript

Promise Observable
Asynchronous nature Asynchronous calls
Once asynchronous calls are initiated, not cancellable can cancel the request using unsubscribe() method
Always returns single value - either promise is resolved or rejected error message multiple vallues based on failure,success,retry,cancel operations
works with single event Multiple event streams are supported during time progress
Retry is not possible Retry is possible using retry operator, use retryWhen based on conditional operator
Early loaded and returns the single result either success or failure Lazy loaded and returns multiples values when required
No operators supports Supports array kind of operators -map,filter,forEach,reduce etc..

Related article