Demystifying Asynchronous Operations in Angular: Promises vs. Observables

Photo by DARKMODE CINEMA: https://www.pexels.com/photo/wood-people-woman-dirty-16381395/

In Angular, Promises and Observables are both used for handling asynchronous operations, but they have some key differences in terms of functionality and usage.

Promises:

1. Promises are part of the JavaScript language and have been available since ES6.
2. A Promise is a one-time operation that can be either resolved with a value or rejected with a reason.
3. Promises can only emit a single value and then they are considered resolved or rejected.
4. Promises are eager, meaning that they start executing as soon as they are created.
5. Promises have two main methods: then() for handling the successful result and catch() for handling errors.
6. Promises can be chained using then() and catch() to handle multiple asynchronous operations in a sequential manner.
7. Example:

typescript
// Creating a Promise
const promise = new Promise((resolve, reject) => {
  // Simulating an asynchronous operation
  setTimeout(() => {
    const randomNumber = Math.random();
    if (randomNumber > 0.5) {
      resolve(randomNumber);
    } else {
      reject('Number is too low');
    }
  }, 1000);
});

// Using the Promise
promise
  .then(result => console.log('Success:', result))
  .catch(error => console.error('Error:', error));

Observables:

1. Observables are part of the RxJS library, which is a powerful library for reactive programming in JavaScript.
2. An Observable is a stream of values that can be emitted over time.
3. Observables can emit multiple values, including zero values and an error, and they can also complete.
4. Observables are lazy, meaning that they only start executing when they have a subscriber.
5. Observables provide a wide range of operators that allow you to transform, filter, combine, and manipulate the emitted values.
6. Observables can be subscribed to using the subscribe() method, and you can handle different types of emissions using the next(), error(), and complete() functions.
7. Example:

typescript
import { Observable } from 'rxjs';

// Creating an Observable
const observable = new Observable(subscriber => {
  // Simulating an asynchronous operation
  setTimeout(() => {
    const randomNumber = Math.random();
    if (randomNumber > 0.5) {
      subscriber.next(randomNumber);
      subscriber.complete();
    } else {
      subscriber.error('Number is too low');
    }
  }, 1000);
});

// Using the Observable
observable.subscribe(
  result => console.log('Next:', result),
  error => console.error('Error:', error),
  () => console.log('Complete')
);

In Angular, both Promises and Observables can be used to handle asynchronous operations, but Observables are generally preferred because they provide more flexibility, support complex scenarios (such as handling multiple values over time), and are more powerful when combined with other operators from RxJS.