Promises

Use case: Simple, one-time asynchronous tasks like HTTP requests

Behavior: Executes immediately on creation, and can't be canceled

Value: Returns a single value, which can either be resolved or rejected

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor() { }

  // Method returning a Promise
  getData(): Promise {
    return new Promise((resolve, reject) => {
      // Simulating an async operation like an HTTP request
      setTimeout(() => {
        const data = { name: 'Raghav', age: 30 };
        if (data) {
          resolve(data);  // Resolving the promise with data
        } else {
          reject('No data found');  // Rejecting the promise in case of failure
        }
      }, 1000); // Delay to simulate async
    });
  }
}

Observables

Use case: Continuous or multiple asynchronous events, like real-time data streams or user interactions

Behavior: Execution is deferred, and can be canceled by unsubscribing

Value: Can emit multiple streams of values, and can be transformed with operators

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  private apiUrl = 'https://jsonplaceholder.typicode.com/users'; // Example API

  constructor(private http: HttpClient) { }

  // Method returning an Observable
  getUsers(): Observable {
    return this.http.get(this.apiUrl);  // This returns an Observable
  }
}

Differences

Flexibility: Observables are more flexible than promises

Cancellation: Promises can't be canceled once started, but observables can be unsubscribed

Execution: Promises execute immediately, but observables are deferred until subscribed

Data manipulation: Observables are better for complex data manipulation