Múltiples peticiones con forkJoin

ForkJoin para múltiples peticiones

En muchas ocasiones necesitamos realizar varias peticiones HTTP simultáneamente y esperar a que todas se completen antes de continuar con la lógica de nuestra aplicación. Aquí es donde el operador forkJoin se convierte en nuestra herramienta esencial.

ForkJoin es como Promise.all() pero para observables. Combina múltiples observables y emite un único valor cuando todos los observables de entrada se han completado. Si cualquiera de los observables falla, forkJoin emite un error.

¿Cuándo usar forkJoin?

El caso de uso más común es cuando necesitamos cargar datos relacionados al mismo tiempo:

• Cargar datos del usuario y sus permisos al entrar a una página
• Obtener información del producto y sus reseñas
• Consultar múltiples APIs para mostrar un dashboard completo
• Cargar configuraciones y datos maestros al inicializar la aplicación

Sintaxis básica

La sintaxis de forkJoin es sencilla. Podemos pasarle un array de observables o un objeto con observables:

import { forkJoin } from 'rxjs';

// Con array
forkJoin([observable1, observable2, observable3])

// Con objeto (más legible)
forkJoin({
  usuarios: this.usuarioService.getUsuarios(),
  permisos: this.permisoService.getPermisos(),
  configuracion: this.configService.getConfig()
})

Ejemplo práctico básico

Imaginemos un servicio que necesita cargar datos del usuario y sus permisos simultáneamente:

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

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

  constructor(private http: HttpClient) {}

  cargarDatosDashboard(usuarioId: number): Observable<any> {
    return forkJoin({
      usuario: this.http.get(`/api/usuarios/${usuarioId}`),
      permisos: this.http.get(`/api/usuarios/${usuarioId}/permisos`),
      estadisticas: this.http.get(`/api/usuarios/${usuarioId}/estadisticas`)
    });
  }
}

En el componente, la suscripción es muy limpia:

import { Component, OnInit } from '@angular/core';
import { DashboardService } from './dashboard.service';

@Component({
  selector: 'app-dashboard',
  template: `
    @if (cargando) {
      <div>Cargando datos...</div>
    }
    
    @if (datos) {
      <div>
        <h1>Bienvenido {{ datos.usuario.nombre }}</h1>
        <p>Permisos: {{ datos.permisos.length }}</p>
        <p>Visitas: {{ datos.estadisticas.visitas }}</p>
      </div>
    }
  `
})
export class DashboardComponent implements OnInit {
  datos: any = null;
  cargando = true;

  constructor(private dashboardService: DashboardService) {}

  ngOnInit() {
    this.dashboardService.cargarDatosDashboard(123).subscribe({
      next: (resultado) => {
        this.datos = resultado;
        this.cargando = false;
      },
      error: (error) => {
        console.error('Error cargando datos:', error);
        this.cargando = false;
      }
    });
  }
}

Ventajas de forkJoin

1. Ejecución paralela: Las peticiones se ejecutan simultáneamente, no de forma secuencial, mejorando significativamente el rendimiento.

2. Un solo punto de suscripción: No necesitamos manejar múltiples suscripciones ni anidar callbacks.

3. Tipado fuerte: Cuando usamos TypeScript con la sintaxis de objeto, obtenemos autocompletado y verificación de tipos.

4. Gestión de errores centralizada: Si cualquier petición falla, podemos manejar el error en un solo lugar.

Diferencias con Promise.all()

La principal diferencia es que forkJoin trabaja con observables, lo que significa que:

• Podemos usar operadores RxJS para transformar los datos
• Se integra naturalmente con el ecosistema Angular
• Maneja automáticamente la desuscripción cuando el componente se destruye
• Permite composición con otros operadores

Otros operadores de combinación

Aunque forkJoin es el más utilizado para principiantes, existen otros operadores para combinar observables como merge, combineLatest, zip, y concat. Cada uno tiene casos de uso específicos que exploraremos en cursos más avanzados.

Por ahora, forkJoin cubrirá el 90% de tus necesidades cuando trabajes con múltiples peticiones HTTP que deben completarse antes de continuar.

Ejemplo práctico

Vamos a construir un ejemplo completo que demuestre el uso de forkJoin en un escenario real. Crearemos un componente de perfil de usuario que necesita cargar múltiples tipos de datos simultáneamente.

Escenario: Perfil de Usuario

Imaginemos una aplicación social donde al visitar el perfil de un usuario necesitamos mostrar:

• Información personal del usuario
• Sus publicaciones recientes
• Lista de sus seguidores
• Estadísticas de actividad

Crear el servicio:

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

interface Usuario {
  id: number;
  nombre: string;
  email: string;
  avatar: string;
}

interface Publicacion {
  id: number;
  titulo: string;
  contenido: string;
  fecha: string;
}

interface Seguidor {
  id: number;
  nombre: string;
  avatar: string;
}

interface Estadisticas {
  publicaciones: number;
  seguidores: number;
  siguiendo: number;
  likes: number;
}

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

  constructor(private http: HttpClient) {}

  cargarPerfilCompleto(usuarioId: number): Observable<{
    usuario: Usuario;
    publicaciones: Publicacion[];
    seguidores: Seguidor[];
    estadisticas: Estadisticas;
  }> {
    return forkJoin({
      usuario: this.http.get<Usuario>(`/api/usuarios/${usuarioId}`),
      publicaciones: this.http.get<Publicacion[]>(`/api/usuarios/${usuarioId}/publicaciones`),
      seguidores: this.http.get<Seguidor[]>(`/api/usuarios/${usuarioId}/seguidores`),
      estadisticas: this.http.get<Estadisticas>(`/api/usuarios/${usuarioId}/estadisticas`)
    });
  }
}

Implementar en el componente:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';
import { PerfilService } from './perfil.service';

@Component({
  selector: 'app-perfil-usuario',
  template: `
    @if (cargando) {
      <div class="loading-container">
        <div class="spinner"></div>
        <p>Cargando perfil...</p>
      </div>
    }
    
    @if (error) {
      <div class="error-message">
        <h3>Error al cargar el perfil</h3>
        <p>{{ mensajeError }}</p>
        <button (click)="recargarPerfil()" class="btn-retry">
          Intentar nuevamente
        </button>
      </div>
    }
    
    @if (datosCompletos && !cargando) {
      <div class="perfil-container">
        <!-- Información del usuario -->
        <div class="usuario-info">
          <img [src]="datosCompletos.usuario.avatar" [alt]="datosCompletos.usuario.nombre">
          <h1>{{ datosCompletos.usuario.nombre }}</h1>
          <p>{{ datosCompletos.usuario.email }}</p>
        </div>
        
        <!-- Estadísticas -->
        <div class="estadisticas">
          <div class="stat-item">
            <strong>{{ datosCompletos.estadisticas.publicaciones }}</strong>
            <span>Publicaciones</span>
          </div>
          <div class="stat-item">
            <strong>{{ datosCompletos.estadisticas.seguidores }}</strong>
            <span>Seguidores</span>
          </div>
          <div class="stat-item">
            <strong>{{ datosCompletos.estadisticas.siguiendo }}</strong>
            <span>Siguiendo</span>
          </div>
          <div class="stat-item">
            <strong>{{ datosCompletos.estadisticas.likes }}</strong>
            <span>Likes</span>
          </div>
        </div>
        
        <!-- Publicaciones recientes -->
        <div class="publicaciones-section">
          <h2>Publicaciones Recientes</h2>
          @for (publicacion of datosCompletos.publicaciones; track publicacion.id) {
            <div class="publicacion-card">
              <h3>{{ publicacion.titulo }}</h3>
              <p>{{ publicacion.contenido }}</p>
              <small>{{ publicacion.fecha | date }}</small>
            </div>
          }
        </div>
        
        <!-- Seguidores -->
        <div class="seguidores-section">
          <h2>Seguidores ({{ datosCompletos.seguidores.length }})</h2>
          <div class="seguidores-grid">
            @for (seguidor of datosCompletos.seguidores; track seguidor.id) {
              <div class="seguidor-card">
                <img [src]="seguidor.avatar" [alt]="seguidor.nombre">
                <span>{{ seguidor.nombre }}</span>
              </div>
            }
          </div>
        </div>
      </div>
    }
  `,
  styles: [`
    .loading-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 2rem;
    }
    
    .error-message {
      text-align: center;
      padding: 2rem;
      color: #e74c3c;
    }
    
    .btn-retry {
      background: #3498db;
      color: white;
      border: none;
      padding: 0.5rem 1rem;
      border-radius: 4px;
      cursor: pointer;
    }
    
    .estadisticas {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
      margin: 2rem 0;
    }
    
    .stat-item {
      text-align: center;
      padding: 1rem;
      background: #f8f9fa;
      border-radius: 8px;
    }
    
    .seguidores-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 1rem;
    }
  `]
})
export class PerfilUsuarioComponent implements OnInit, OnDestroy {
  datosCompletos: any = null;
  cargando = false;
  error = false;
  mensajeError = '';
  private subscription?: Subscription;
  
  constructor(
    private perfilService: PerfilService,
    private route: ActivatedRoute
  ) {}
  
  ngOnInit() {
    const usuarioId = this.route.snapshot.params['id'];
    this.cargarPerfil(usuarioId);
  }
  
  ngOnDestroy() {
    this.subscription?.unsubscribe();
  }
  
  cargarPerfil(usuarioId: number) {
    this.cargando = true;
    this.error = false;
    
    this.subscription = this.perfilService.cargarPerfilCompleto(usuarioId).subscribe({
      next: (datos) => {
        this.datosCompletos = datos;
        this.cargando = false;
        console.log('Perfil cargado completamente:', datos);
      },
      error: (error) => {
        console.error('Error al cargar perfil:', error);
        this.error = true;
        this.cargando = false;
        this.mensajeError = this.obtenerMensajeError(error);
      }
    });
  }
  
  recargarPerfil() {
    const usuarioId = this.route.snapshot.params['id'];
    this.cargarPerfil(usuarioId);
  }
  
  private obtenerMensajeError(error: any): string {
    if (error.status === 404) {
      return 'Usuario no encontrado';
    }
    if (error.status === 500) {
      return 'Error del servidor. Intenta más tarde';
    }
    return 'Ha ocurrido un error inesperado';
  }
}

Manejo de errores específicos

Una ventaja de forkJoin es que podemos manejar errores de forma granular. Si queremos que algunas peticiones fallen sin afectar las otras, podemos usar el operador catchError:

import { catchError, of } from 'rxjs';

cargarPerfilConErrores(usuarioId: number) {
  return forkJoin({
    usuario: this.http.get<Usuario>(`/api/usuarios/${usuarioId}`),
    publicaciones: this.http.get<Publicacion[]>(`/api/usuarios/${usuarioId}/publicaciones`)
      .pipe(catchError(() => of([]))), // Si falla, devuelve array vacío
    seguidores: this.http.get<Seguidor[]>(`/api/usuarios/${usuarioId}/seguidores`)
      .pipe(catchError(() => of([]))), // Si falla, devuelve array vacío
    estadisticas: this.http.get<Estadisticas>(`/api/usuarios/${usuarioId}/estadisticas`)
      .pipe(catchError(() => of({ publicaciones: 0, seguidores: 0, siguiendo: 0, likes: 0 })))
  });
}

Ejemplo con carga progresiva

Para mejorar la experiencia del usuario, podemos mostrar indicadores de progreso para cada sección:

@Component({
  template: `
    <div class="perfil-container">
      <!-- Usuario (siempre necesario) -->
      @if (estados.usuario.cargando) {
        <div class="loading-section">Cargando información del usuario...</div>
      }
      
      <!-- Publicaciones -->
      <div class="publicaciones-section">
        <h2>Publicaciones 
          @if (estados.publicaciones.cargando) {
            <span class="loading-indicator">⏳</span>
          }
        </h2>
        @if (estados.publicaciones.completado) {
          <!-- Mostrar publicaciones -->
        }
      </div>
      
      <!-- Similar para otras secciones -->
    </div>
  `
})
export class PerfilAvanzadoComponent {
  estados = {
    usuario: { cargando: true, completado: false },
    publicaciones: { cargando: true, completado: false },
    seguidores: { cargando: true, completado: false },
    estadisticas: { cargando: true, completado: false }
  };
  
  cargarPerfilProgresivo(usuarioId: number) {
    this.perfilService.cargarPerfilCompleto(usuarioId).subscribe({
      next: (datos) => {
        // Marcar todo como completado
        Object.keys(this.estados).forEach(key => {
          this.estados[key as keyof typeof this.estados] = {
            cargando: false,
            completado: true
          };
        });
        this.datosCompletos = datos;
      }
    });
  }
}

Este ejemplo demuestra cómo forkJoin simplifica significativamente el manejo de múltiples peticiones HTTP, proporcionando una experiencia de usuario fluida y un código mantenible.