Hola, dev! En este post hablaremos de estos dos operadores reactivos, explicaré el funcionamiento de cada uno dando pequeños ejemplos. Espero te sea de utilidad, y sin más que decir, ¡vamos a comenzar!

Estos operadores reactivos son muy interesantes y pueden ser muy útiles para detener una solicitud según una condición cuando trabajamos con observables.

El skipUntil va a detener las solicitudes hasta que se cumpla una vez la condición, después de ese momento van a pasar todas las solicitudes, como se podría ver en el siguiente ejemplo:

Dado que en el pipe estamos utilizando el skipUntil, y la condición de este es el “evento (click)“, hasta que el antes dicho no se produzca no va dejar pasar el valor. Significa que si das click en el “segundo 4”, a partir de ese momento va a imprimir en la consola los valores posteriores, como podemos ver a continuación:

import { interval, fromEvent, skipUntil } from 'rxjs';

const intervalObservable = interval(1000);
const click = fromEvent(document, 'click');

const emitAfterClick = intervalObservable.pipe(
  skipUntil(click)
);
// clicked at 4.6s. output: 5...6...7...8........ or
// clicked at 7.3s. output: 8...9...10..11.......
emitAfterClick.subscribe(value => console.log(value));

Puede ser que esto sea lo que se quiera sin embargo hay que tener mucho cuidado con esto, porqué se podría confundir con el funcionamiento del filter, que en su caso siempre va a detener las solicitudes que no cumplan la condición, el cual veremos un ejemplo a continuación:

Está más o menos claro pero aquí los que no cumplan la condición “num % 2 === 0” no van a llegar a la subscripción:

// RxJS v6+
import { from } from 'rxjs';
import { filter } from 'rxjs/operators';

//emit (1,2,3,4,5)
const source = from([1, 2, 3, 4, 5]);
//filter out non-even numbers
const example = source.pipe(filter(num => num % 2 === 0));
//output: "Even number: 2", "Even number: 4"
const subscribe = example.subscribe(val => console.log(`Even number: ${val}`));

https://www.learnrxjs.io/learn-rxjs/operators/filtering/filter

Así llegamos al final de este post, ha sido muy directo. Espero te sirva esta pequeña explicación y puedas usar estos operadores reactivos en tus próximos proyectos. dejo los links de la documentación como referencia y por si quieres ver más.

Gracias por leer. Cuídate nos vemos en un próximo post.