Observable vs Promise

Observables and Promises are both programming patterns that can be used to handle asynchronous data in JavaScript.

Observables are a pattern for dealing with asynchronous data streams, similar to the way that arrays deal with synchronous data collections. An Observable is like a stream which can emit multiple values over time, and can also be cancelled. Observables are often used with the RxJS library in Angular applications, but they can also be used with other libraries or on their own.

Promises, on the other hand, are a pattern for handling asynchronous operations that return a single value at some point in the future. A Promise represents the result of an asynchronous operation, and provides a way to register callbacks to be executed when the asynchronous operation completes. Promises are a built-in feature of JavaScript, and are widely used for handling asynchronous operations in many JavaScript libraries and frameworks.

In summary, Observables are a way to handle multiple values over time, whereas Promises are a way to handle a single value that will be available at some point in the future.

In JavaScript, an observable is a type of object that can emit a stream of values over time. Observables are often used for asynchronous programming tasks, such as making network requests or handling user input.

A promise, on the other hand, is a special type of object that represents the result of an asynchronous operation. A promise can be in one of three states: pending, fulfilled, or rejected. When a promise is created, it is in the pending state. Once the asynchronous operation is completed, the promise is either fulfilled with a value or rejected with an error.

One key difference between observables and promises is that observables can emit multiple values over time, while a promise can only be fulfilled or rejected once. Observables also have a wider range of operator methods available, such as map, filter, and reduce, which can be used to transform or manipulate the stream of values emitted by the observable.

Here is an example of using an observable to emit a stream of values:

const observable = new Observable(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  setTimeout(() => {
    subscriber.next(4);
    subscriber.complete();
  }, 1000);
});

console.log('just before subscribe');
observable.subscribe({
  next(x) { console.log('got value ' + x); },
  error(err) { console.error('something wrong occurred: ' + err); },
  complete() { console.log('done'); }
});
console.log('just after subscribe');

Output:

just before subscribe
got value 1
got value 2
got value 3
just after subscribe
got value 4
done

And here is an example of using a promise to handle the result of an asynchronous operation:

const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve('done'), 1000);
});

promise.then(
  result => console.log(result),
  error => console.log(error)
);

Output:

done