Conoce diferir

En un artículo anterior , vimos cómo crear nuestras propias declaraciones RxJS. Ahora quiero hablar sobre un operador de creación poco conocido defer, y explicar cómo puede usarlo en algunas situaciones.

Suponga que necesita crear un operador que tome una función y la ejecute solo una vez, la primera vez que recibe un valor. Lo implementamos bajo el nombre tapOnce

function tapOnce<T>(fn: Function): OperatorFunction<T, T> {
  return function(source: Observable<any>) {
    let run = false;
    return source.pipe(
      tap(() => {
        if (!run) {
          fn();
          run = true;
        }
      })
    );
  };
}

El código es claro: se tapusa para ejecutar la función, la bandera se runnecesita para hacer esto solo una vez. Ahora usamos el operador.

const source = interval(5000).pipe(
  tapOnce(() => console.log('+')
));

source.subscribe(console.log);

Todo funciona, el signo más se muestra en la consola solo en el primer emite. Ahora agregue los suscriptores.

const source = interval(5000).pipe(
  tapOnce(() => console.log('+')
));

source.subscribe(console.log);
source.subscribe(console.log);

Si miras la consola, solo hay una ventaja. El problema es que ambos suscriptores usan el mismo entorno léxico y se refieren a la misma variable run. Necesitamos una forma de posponer la creación de un hilo hasta que alguien se suscriba.

Ayudará defer

import { defer } from 'rxjs';

function tapOnce<T>(fn: Function): OperatorFunction<T, T> {
  return function(source: Observable<any>) {
    return defer(() => {
      let run = false;
      return source.pipe(
        tap(() => {
          if (!run) {
            fn();
            run = true;
          }
        })
      );
    });
  };
}

El operador deferacepta una función que debería regresar ObservableInput. El código dentro deferse ejecutará solo después de la suscripción, y no durante la creación. Usando este enfoque y gracias al cierre de js, cada suscriptor usa su propio entorno léxico.

Creemos nuestra implementación simple deferpara una mejor comprensión.

function defer(observableFactory: () => ObservableInput<any>) {
  return new Observable(subscriber => {
    const source = observableFactory();
    return source.subscribe(subscriber);
  });
}

defer devuelve una nueva secuencia, que se crea en el momento de la suscripción por la función de fábrica, y se utilizará como fuente.

Aquí hay más ejemplos donde será útil defer. Digamos que tenemos una expresión que debe contarse cuando alguien se registra. por ejemplo

const randNum = of(Math.random());

randNum.subscribe(console.log);
randNum.subscribe(console.log);

En este ejemplo, cada suscriptor recibirá el mismo valor aleatorio. Puede corregirlo para que la expresión se cuente al suscribirse, no al anunciar.

const randNum = defer(() => of(Math.random()));

randNum2.subscribe(console.log);
randNum2.subscribe(console.log);

// The same concept as using a function
const randNum = () => of(Math.random());
randNum2().subscribe(console.log);
randNum2().subscribe(console.log);

Otro ejemplo es cuando necesita retrasar la ejecución de una promesa.

// This already executing regardless the numbers of handlers
const promise = new Promise(resolve => {
  resolve();
});

// Deferring the creation of the promise until someone subscribes
const promiseDefered = defer(() => {
  return new Promise(resolve => {
    resolve();
  });
});

promiseDefered.subscribe(console.log);

Las promesas se ejecutan inmediatamente, independientemente del número de oyentes. Puede hacer que una promesa parezca una corriente (es decir, diferida) usando defer.