Difference between ES6 Promise and RXJS Observable ?

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. These are helpful to consume the REST API calls in front-end applications like angular, react and vuejs as well as server-side applications with node environments.

Promises are the latest features in javascript(ES6) which are used to do asynchronous operations. Observable are classes in the RXJS framework that is used to do many asynchronous calls, able to provide extra features such as canceling the operation.

You can check other posts on How to always run some code when a promise is resolved or rejected

#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, that means the promise is resolved and the result is a value. else operation throws an error message and 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.

In the below, the 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 include button click events, for 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 the 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 subscribes using the 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:

Start
next: successvalue
error: failed
End

#What is Difference between ES6 Promise and RXJS Observable in javascript

|:--------| :--------------- |