What is the difference between Promise and Observable in Angular? An example on each would be helpful in understanding both the cases. In what scenario can we use each case?

on

 

In Angular, both Promises and Observables are used for handling asynchronous operations, but they have some key differences in terms of functionality and use cases. Let's explore these differences and provide examples for each.

Promises:

Promises represent a single value that may not be available yet but will be resolved or rejected at some point in the future. They are typically used for one-time asynchronous operations, such as making an HTTP request or reading a file.

Here's an example of using a Promise in Angular to simulate fetching data from an API:

typescript
// Using a Promise to fetch data
function fetchDataWithPromise() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { message: "Data fetched with Promise" };
      resolve(data); // Resolve the Promise with the fetched data
    }, 2000);
  });
}

fetchDataWithPromise()
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });

In this example, fetchDataWithPromise returns a Promise that resolves with the fetched data after a simulated delay. We use .then() to handle the successful resolution and .catch() to handle errors.

Observables:

Observables are a more powerful and flexible way to handle asynchronous operations, especially when dealing with streams of data over time. They support multiple values over time and offer powerful operators for transforming, filtering, and combining data streams.

Here's an example of using an Observable in Angular to create a simple timer:

typescript
import { Observable, interval } from 'rxjs';

// Using an Observable to create a timer
const timer$ = interval(1000); // Emit a value every second

const subscription = timer$.subscribe((value) => {
  console.log(`Timer value: ${value}`);
});

// Unsubscribe after 5 seconds
setTimeout(() => {
  subscription.unsubscribe();
}, 5000);

In this example, we create an Observable timer$ that emits a value every second using the interval operator from the RxJS library. We subscribe to this Observable and log the emitted values. After 5 seconds, we unsubscribe to stop receiving values.

Scenarios for Use:

  1. Promises are suitable for one-time operations where you expect a single result. For example, when making HTTP requests, Promises are often used because you typically expect one response.

  2. Observables are more suitable for scenarios involving continuous streams of data, such as user input events, real-time updates, or data that changes over time. They provide better support for operations like mapping, filtering, and combining multiple data streams.

In summary, use Promises for simple, one-time asynchronous operations, and use Observables for handling complex scenarios involving continuous data streams and advanced data manipulation. The choice between them depends on the specific requirements of your application.

Comments

Post a Comment