JavaScript Promise and RxJS Observable

Major Differences between Promise and Observable

Promise vs Observable

Eager vs Lazy

Promise is eager, whereas Observable is lazy. This is a demo.

const hello = new Promise((resolve, reject) => {
  console.log('Eager. I am insider. Hello!');
  resolve('Hi! Nice to meet you.');
});
console.log('Before calling "then" method on Promise');
hello.then(res => console.log(`Hallo! I'm from Promise. ${res}`));

Tips: You could run this code directly on Chrome Browser’s console (macOS shortcut: Opt + Command + I. Open tab ‘console’ copy above code segment and Enter)

const { Observable } = rxjs;
const hello$ = new Observable(observer => {
  console.log('Lazy. I am insider. Hello!');
  observer.next('Hi! Nice to meet you.');
  observer.complete();
});
console.log('Before calling "subscribe" on Observable');
hello$.subscribe({
  next: console.log,
  complete: () => console.log('Goodbye')
});

Tips: You can open a new tab to https://rxjs-dev.firebaseapp.com/ before open Chrome Console to run this code. (Imported rxjs library)

Observable can be synchronous

Promise is Always Asynchronous.

const hello = new Promise((resolve, reject) => {
  resolve('Hi! Nice to meet you.');
});
console.log('Before calling "then" method on Promise');
hello.then(res => console.log(`Hallo! I'm from Promise. ${res}`));
console.log('After calling then on Promise (proff of being always async');

Observable can be Synchronous or Asynchronous

const { Observable } = rxjs;
const greetingLady$ = new Observable(observer => {
  observer.next('Hello! I am glad to get to know you.');
  observer.complete();
});
console.log('Before calling subscrible on Observable');
greetingLady$.subscribe({
  next: console.log,
  complete: () => console.log('End of conversation with preety lady')
});
console.log('After calling subscribe on Observable (proof of being able to execute sync');

const tiredGreetingLady2$ = new Observable(observer => {
  setTimeout(() => {
    observer.next('Hello! I am glad to get to know you.');
    observer.complete();
  }, 2000);
});
console.log('Before calling subscribe on Observable');
tiredGreetingLady2$.subscribe({
  next: console.log,
  complete: () => console.log('End of conversation with tired preety lady')
});
console.log('After calling subscribe on Observable (proof of being able to execute async)');

Observable can emit multiple values

a Promise object may provide only a single value. It can be an array but it’s still a single object. On the contrary, an Observable may emit multiple values over time.

const { Observable } = rxjs; 
const notifications$ = new Observable(observer => {
  const interval = setInterval(() => {
    observer.next('New notification');  
  }, 2000);   
  return () => clearInterval(interval);
}); 
const subscription = notifications$.subscribe(console.log); 
setTimeout(() => subscription.unsubscribe(), 8000);

Operators rock!

You can apply RxJS operators to an Observable to get a new tailored stream. RxJS is the most interesting with a great number of operators that can be applied to Observables in order to get a new tailored stream.

const { Observable } = rxjs;
const { map } = rxjs.operators;
const notifications$ = new Observable(observer => {
  const interval = setInterval(() => {
    observer.next('New notification');
  }, 2000);
  return () => clearInterval(interval);
});
const enhancedNotifications$ = notifications$.pipe(
  map(message => `${message} ${new Date()}`)
);
const subscription = enhancedNotifications$.subscribe(console.log);
setTimeout(() => subscription.unsubscribe(), 8000);

Refer: https://medium.com/javascript-everyday/javascript-theory-promise-vs-observable-d3087bc1239a