{

Difference between ES6 Promise and RXJS Observable ?


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

 In javascript, the difference between ES6 Promise and RXJS Observable is explained with examples.

observable and promises are used to handle the asynchronous calls in a javascript. This will be helpful to consume the rest of API calls in front-end applications like angular, react and vuejs as well as server-side applications with node environment.
Promises are the 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 the promise is resolved, The result is a value else operation throws an error message, the promise is rejected, 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 a new Promise, providing 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 executes for promise resolve, and catch block executes for error messages.

RXJS Observable are cancellable

It works with multiple events in a stream of data flow These are button click events as an example, It does not call until user-initiated action. The result is either success, failure, or 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, or complete event without parameters

import { Observable } from 'rxjs';  
  
const observableObject = new Observable(myobserver => {  
  myobserver.next("successvalue");  
  myobserver.error("failed");  
  myobserver.complete();  
});  

the observable object subscrie using subscribe method 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 the single value - either promise 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 support Supports array kind of operators -map, filter,forEach, reduce etc..
THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.