Sebastian Gomez
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铆 */);
馃洜 Implementaci贸n de concat 馃洜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
};
});
}
馃摎 Conclusi贸n 馃摎En este post, aprendimos a:
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! 馃殌馃槃
Creador de contenido principalmente acerca de tecnolog铆a.