Handling Time: Promises and Observables in Angular

Explore the fundamental concepts of Promises and Observables in Angular. Learn how Promises handle single asynchronous events, while RxJS Observables manage streams of data over time. Understand their differences and when to use each in your Angular applications.

⏳

Welcome! Let's explore asynchronous operations with Promises and Observables.

/* Waiting for data... */

Promise: The Single IOU

A Promise represents a single future value. Think of it as an IOU for a value that will be delivered later. It's ideal for one-time asynchronous operations, like an HTTP request that returns a single response. A Promise is either resolved (successful) or rejected (failed), and this happens only once.

Observable: The Data Stream

An Observable is a stream of multiple values over time. It can emit zero, one, or many values. This makes it perfect for handling recurring events like mouse clicks, keyboard inputs, or data from a real-time source like a WebSocket. You can `subscribe` to an Observable to listen for its values.

Key Differences

Promises are eager (they start executing immediately), while Observables are lazy (they only start when subscribed to). Promises are not cancellable, but you can `unsubscribe` from an Observable to cancel it and prevent memory leaks. Observables also come with a powerful set of operators (like `map`, `filter`, `switchMap`) for complex data manipulation.

When to Use Which

Use a Promise when you expect a single result from an async task (e.g., fetching a configuration file at startup). Use an Observable for anything that involves multiple values over time, such as user events, animations, or handling data from Angular's `HttpClient`, which returns Observables by default.

Practice Zone

Interactive Test 1: Match the Concepts

Drag the characteristic to the correct concept.

Arrastra en el orden correspondiente.

Arrastra las opciones:

Single Value

Multiple Values

Not Cancellable

Cancellable

Completa el código:

Promise______

Observable______

Unlock with Premium

Interactive Test 2: Build the Basics

Rellena los huecos en cada casilla.

// Promise
const myPromise = new Promise((  ) => {
  ('Done!');
});

// Observable
import { Observable } from 'rxjs';
const myObservable = new Observable(subscriber => {
  subscriber.('First');
  subscriber.('Second');
});

Unlock with Premium

Practice Example: Create an Observable

Create an Observable that emits the numbers 1, 2, and 3, then completes. Subscribe to it and log the values.

* Write the code below. Correct characters will be shown in green and incorrect ones in red.

import { Observable } from 'rxjs';

const myObservable = new Observable(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  subscriber.complete();
});

myObservable.subscribe(value => console.log(value));

Unlock with Premium

Knowledge Check

What is a key advantage of Observables over Promises?

Unlock with Premium

← Previous Next →

Async in a Real Angular App

In Angular, you'll encounter both Promises and Observables, but the framework heavily favors Observables, especially for its built-in APIs.

1. HttpClient: The Observable Powerhouse

Angular's `HttpClient` is a prime example. Every HTTP method (get, post, etc.) returns an Observable. This is powerful because it allows you to easily chain operators to transform the response, handle errors gracefully, and even retry the request automatically.

// Fetch data and get only the 'name' property
this.http.get('/api/user').pipe(
  map(user => user.name)
).subscribe(name => ...);

2. Converting to a Promise

If you truly only need a single value and prefer the `async/await` syntax, you can easily convert an Observable to a Promise using the `lastValueFrom` or `firstValueFrom` functions from RxJS.

import { lastValueFrom } from 'rxjs';

async function getUser() {
  const user = await lastValueFrom(
    this.http.get('/api/user')
  );
  // Now you can work with 'user'
}

Practical Takeaway: Embrace Observables in Angular. While converting to a Promise is possible, staying within the RxJS ecosystem unlocks a more powerful and consistent way to handle asynchronous data.

Async Concepts Glossary

Asynchronous: An operation that does not block the main thread of execution. It allows the program to continue running while waiting for a result, like a network request.
Promise: An object representing the eventual completion (or failure) of an asynchronous operation and its resulting value.
Observable: A stream of values that can be emitted over time. Part of the RxJS library, it provides a powerful way to manage async data.
Subscription: The act of "listening" to an Observable. The code inside a subscription runs every time the Observable emits a new value.
RxJS: Reactive Extensions for JavaScript, a library for composing asynchronous and event-based programs by using observable sequences.