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 is latest features in javascript which are used to do asynchronous operations Observable in RXJS framework used to do many asynchronous calls, able to provide cancel the operation.

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 => {  
  myobserver.next("successvalue");  
  myobserver.error("failed");  
  myobserver.complete();  
});  

observable object is subscribed using subscribe with three callbacks for success,error and complete

console.log('Start ');  
observableObject.subscribe({  
  next(value) { console.log('next: ' + value); },  
  error(err) { console.error('error: ' + err); },  
  complete() { console.log('complete:'); }  
});  
console.log('End');  

and output is

Start  
next: successvalue  
error: failed  
End  

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 values based on failure,success,retry,cancel operations
works with single event only 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..
Similar Posts