Sebastian Gomez

Feb 24, 2022

Updated: Apr 25, 2023

Implementando concat para concatenar observables

En este post, aprenderemos cómo implementar una función llamada concat que nos permita transformar diferentes observables en uno solo al concatenarlos. 😄

Anteriormente, exploramos la implementación de los operadores filter, map y of en observables. En esta ocasión, abordaremos cómo concatenar observables. Esto es especialmente útil cuando deseamos combinar datos de una petición HTTP (FromEvent) con datos almacenados en arreglos o variables. 🌐

Veamos un ejemplo:

// Crea un observable llamado "sourceOne" a partir de un evento (en este caso, se deja como un comentario para ser reemplazado)
// Este evento podría dar como resultado la emisión de valores 1, 2, 3
const sourceOne = Observable.fromEvent(/** Algo que nos dé 1, 2, 3 por ejemplo */);

// Crea otro observable llamado "sourceTwo" que emite los valores 4, 5, 6 de forma síncrona
const sourceTwo = of(4, 5, 6);

// Crea un observable llamado "fuenteDeLaVerdad" que concatena "sourceOne" y "sourceTwo"
// "sourceTwo" comenzará a emitir valores solo después de que "sourceOne" haya completado
const fuenteDeLaVerdad = Observable.concat(sourceOne, sourceTwo);

// Suscribe un objeto observador (aquí representado como un comentario) al observable "fuenteDeLaVerdad"
// El observador manejará los valores emitidos por ambos observables concatenados
fuenteDeLaVerdad.subscribe(/** lo que queramos hacer aquí */);

Para implementar concat, debemos crear un método estático que genere un nuevo observable a partir de los observables que reciba como parámetros. Aquí hay un esqueleto básico para la clase Observable:

// Define una clase llamada Observable
class Observable {
  // Define un método estático "concat" que toma un número variable de observables como argumento
  static concat(...observables) {
    // Retorna una nueva instancia de Observable
    return new Observable(function subscribe(observer) {
      // Aquí se implementará la lógica de combinación de observables
      // Esta función se llamará cuando se suscriba un observador al observable creado a partir de "concat"
    });
  }
  //...
}

Luego, necesitamos dividir los observables y tomar el primero de ellos, iterar sobre todos sus elementos y, al finalizar, continuar con el siguiente observable hasta que no queden más. Usaremos recursividad para implementar esta lógica:

static concat(...observables) {
  return new Observable(function subscribe(observer) {
    let myObservables = observables.slice();
    let sub = null;
    let processObservable = () => {
      if (myObservables.length === 0) {
        observer.complete();
      } else {
        let observable = myObservables.shift(); //Take the next observable in the params.sub = observable.subscribe({next(v) {
            observer.next(v);
          },
          error(err) {
            observer.error(err);
            sub.unsubscribe();
          },
          complete() {
            processObservable();
          }
        });
      }
    };
    processObservable();
    return {
      sub
    };
  });
}

En este post, aprendimos a:

1. Implementar la función concat para concatenar observables.
2. Utilizar la recursividad para procesar varios observables.
3. Combinar datos de diferentes fuentes como peticiones HTTP y variables.

1. Implementa la función concat en un proyecto propio y prueba combinar diferentes observables.
2. Modifica la función concat para que, en caso de error en un observable, continúe con el siguiente en lugar de suspender el proceso.
3. Experimenta con la concatenación de más de dos observables.

1. La función concat nos permite combinar diferentes observables en uno solo.
2. La recursividad es una herramienta útil para procesar una lista de observables.
3. Concatenar observables facilita la combinación de datos de diversas fuentes.

Espero que este post te haya sido útil y te ayude a entender mejor cómo implementar la función concat para concatenar observables. Si tienes alguna pregunta, inquietud o deseas compartir tus logros con esta implementación, no dudes en dejar un comentario en la sección de comentarios. Si te gustó este contenido, compártelo con tus amigos y colegas a través de las redes sociales. ¡Buena suerte en tus proyectos y hasta la próxima! 🚀😄