Observable

Una representación de cualquier conjunto de valores a lo largo de cualquier intervalo de tiempo. Es el componente más básico de RxJS

class Observable<T> implements Subscribable {
  static create: Function;
  static if: typeof iif;
  static throw: typeof throwError;
  constructor(
    subscribe?: (
      this: Observable<T>,
      subscriber: Subscriber<T>
    ) => TeardownLogic
  );
  _isScalar: boolean;
  source: Observable<any>;
  operator: Operator<any, T>;
  lift<R>(operator: Operator<T, R>): Observable<R>;
  subscribe(
    observerOrNext?:
      | NextObserver<T>
      | ErrorObserver<T>
      | CompletionObserver<T>
      | ((value: T) => void),
    error?: (error: any) => void,
    complete?: () => void
  ): Subscription;
  _trySubscribe(sink: Subscriber<T>): TeardownLogic;
  forEach(
    next: (value: T) => void,
    promiseCtor?: PromiseConstructorLike
  ): Promise<void>;
  pipe(...operations: OperatorFunction<any, any>[]): Observable<any>;
  toPromise(promiseCtor?: PromiseConstructorLike): Promise<T>;
}

Subclases

Propiedades Estáticas

PropiedadTipoDescripción

create

Function

Crea un nuevo Observable frío llamando al constructor Observable.

if

typeof iif

throw

typeof throwError

Constructor

constructor()

Firma

constructor(subscribe?: (this: Observable, subscriber: Subscriber) => TeardownLogic)

Parámetros

subscribe

Opcional. El valor por defecto es undefined.

La función que es llamada cuando el Observable es suscrito inicialmente. A esta función se le proporciona un Suscriptor, al cual se le pueden proporcionar notificaciones next con valores nuevos, notificaciones error para lanzar un error o notificaciones complete para indicar una completación exitosa.

Propiedades

PropiedadTipoDescripción

_isScalar

boolean Detalle de implementación interna, no se debe usar directamente.

source

Observable

operator

Operator

Métodos

lift()

Crea un Observable nuevo, con este Observable como fuente, y el operador proporcionado definido como el operador del nuevo Observable.

Firma

lift(operator: Operator): Observable

Parámetros

Retorna

Observable: Un nuevo Observable con el Operador aplicado.

operator

El operador que define la operación que aplicar al Observable

subscribe()

Invoca la ejecución de un Observable y registra manejadores Observador para las notificaciones que emita.

5 sobrecargas

subscribe no es un operador normal, sino un operador que llama a la función subscribe interna de un Observable. Puede ser, por ejemplo, una función que se le proporicone al constructor del Observable, aunque la mayoría de las veces suele ser una implementación de la biblioteca, que define los valores que serán emitidos por el Observable, y el momento en el que se emitirán. Esto quiere decir que el momento en el que se llama a subscribe es el momento en el que el Observable empieza a trabajar, y no en el momento de su creación, como comúnmente se piensa. Además de dar comienzo a la ejecución de un Observable, este método permite escuchar los valores que emite, además de cuando se completa o lanza un error. Esto se puede lograr de dos maneras: La primera forma es creando un objeto que implemente la interfaz Observer. Debe contener los métodos definidos por dicha interfaz, pero teniendo en cuenta que debe ser un objeto normal de JavaScript, que se puede crear de cualquier forma (clase ES6, constructor clásico de función, literal de objeto etc.) No se debe tratar de utilizar ningún detalle de implementación de RxJS para crear Observadores, no es necesario. También se debe tener en cuenta que el objeto no tiene por qué implementar todos los métodos, sino que se pueden omitir aquellos métodos que no se vayan a utilizar. Sin embargo, se debe tener en cuenta que si el método error no se proporciona, todos los errores se quedarán sin gestionar. La segunda forma consiste en dejar de lado el objeto Observer y utilizar funciones callback en lugar de sus métodos. Esto quiere decir que se pueden proporcionar tres funciones como argumentos a subscribe, donde la primera función es equivalente a un método next, la segunda a un método error y la tercera a un método complete. Al igual que en el caso del objeto Observador, se pueden omitir las funciones que no se necesiten, preferiblemente mediante el paso del valor undefined o null, ya que subscribe reconoce estas funciones según su posición en la llamada a la función. Al igual que antes, si no se proporciona la función de error, cualquier error emitido por el Observable será automáticamente lanzado, sin posibilidad de gestionarlo. Independientemente del método que se escoja para llamar a subscribe, se retorna un objeto Subscription. ESte objeto permite que se llame a la función unsubscribe, que para la ejecución del Observable y desecha los recursos que dicho Observable haya utilizado. Se debe tener en cuenta que cancelar una Suscripción no provoca una llamada a la callback complete proporcionada a la función subscribe, ya que esta se llama exclusivamente cuando recibe la señal de completación del Observable. Es importante tener en cuenta que no se garantiza que las callbacks proporcionadas a subscribe se llamen asíncronamente, ya que es el propoio Observable el que decide en qué momento se llama a cada una de estas funciones. Por ejemplo, un Observable creado con el operador of emite todos sus valores síncronamente. Siempre se debe comprobar la documentación para ver cómo se comporta cada Observable al ser suscrito, y si su comportamiento por defecto puede modificarse con un Planificador.

Ejemplos

Ejemplos de la documentación oficial

Suscribirse con un Observador

import { of } from "rxjs";

const sumObserver = {
  sum: 0,
  next(value) {
    console.log("Sumando: " + value);
    this.sum = this.sum + value;
  },
  error() {
    // Este método se podría eliminar, ya que, en este momento, los errores no importan
  },
  complete() {
    console.log("El resultado de la suma es: " + this.sum);
  },
};

of(1, 2, 3) // Emite 1, 2, 3 síncronamente y se completa
  .subscribe(sumObserver);

// Salida:
// "Sumando: 1"
// "Sumando: 2"
// "Sumando: 3"
// "El resultado de la suma es: 6"

Suscribirse con funciones

import { of } from "rxjs";

let sum = 0;

of(1, 2, 3).subscribe(
  (value) => {
    console.log("Sumando: " + value);
    sum = sum + value;
  },
  undefined,
  () => console.log("El resultado de la suma es: " + sum)
);

// Salida:
// "Sumando: 1"
// "Sumando: 2"
// "Sumando: 3"
// "El resultado de la suma es: 6"

Cancelar una suscripción

import { interval } from "rxjs";

const subscription = interval(1000).subscribe(
  (num) => console.log(num),
  undefined,
  () => {
    // No se llamará, aunque se cancele la Suscripción. not be called, even when cancelling subscription.
    console.log("¡Completado!");
  }
);

setTimeout(() => {
  subscription.unsubscribe();
  console.log("¡Suscripción cancelada!");
}, 2500);

// Salida:
// 0 tras 1s
// 1 tras 2s
// "¡Suscripción cancelada!" tras 2.5s
_trySubscribe()

Firma

_trySubscribe(sink: Subscriber): TeardownLogic

Parámetros

Retorna

TeardownLogic

sink

Tipo: Subscriber.

forEach()

Firma

forEach(next: (value: T) => void, promiseCtor?: PromiseConstructorLike): Promise

Parámetros

Retorna

Promise: Una Promesa que o bien se resuelve al completarse el Observable o se rechaza con el error gestionado.

next

Un manejador para cada elemento emitido por el Observable.

promiseCtor

Opcional. El valor por defecto es undefined. Una función constructora utilizada para instanciar la Promesa.

pipe()

Se utiliza para encadenar los operadores funcionales.

11 sobrecargas

Firma

pipe(): Observable

Parámetros

No recibe ningún parámetro.

Retorna

Observable

Firma

pipe(op1: OperatorFunction): ObservableObservablepipe(op1: OperatorFunction, op2: OperatorFunction): ObservableObservablepipe(op1: OperatorFunction, op2: OperatorFunction, op3: OperatorFunction): ObservableObservablepipe(op1: OperatorFunction, op2: OperatorFunction, op3: OperatorFunction, op4: OperatorFunction): ObservableObservablepipe(op1: OperatorFunction, op2: OperatorFunction, op3: OperatorFunction, op4: OperatorFunction, op5: OperatorFunction): ObservableObservablepipe(op1: OperatorFunction, op2: OperatorFunction, op3: OperatorFunction, op4: OperatorFunction, op5: OperatorFunction, op6: OperatorFunction): ObservableObservablepipe(op1: OperatorFunction, op2: OperatorFunction, op3: OperatorFunction, op4: OperatorFunction, op5: OperatorFunction, op6: OperatorFunction, op7: OperatorFunction): ObservableObservablepipe(op1: OperatorFunction, op2: OperatorFunction, op3: OperatorFunction, op4: OperatorFunction, op5: OperatorFunction, op6: OperatorFunction, op7: OperatorFunction, op8: OperatorFunction): ObservableObservablepipe(op1: OperatorFunction, op2: OperatorFunction, op3: OperatorFunction, op4: OperatorFunction, op5: OperatorFunction, op6: OperatorFunction, op7: OperatorFunction, op8: OperatorFunction, op9: OperatorFunction): ObservableObservablepipe(op1: OperatorFunction, op2: OperatorFunction, op3: OperatorFunction, op4: OperatorFunction, op5: OperatorFunction, op6: OperatorFunction, op7: OperatorFunction, op8: OperatorFunction, op9: OperatorFunction, ...operations: OperatorFunction[]): Observable<{}>Observable<{}>

op1

Tipo: OperatorFunction.

op1

Tipo: OperatorFunction.

op2

Tipo: OperatorFunction.

op1

Tipo: OperatorFunction.

op2

Tipo: OperatorFunction.

op3

Tipo: OperatorFunction.

op1

Tipo: OperatorFunction.

op2

Tipo: OperatorFunction.

op3

Tipo: OperatorFunction.

op4

Tipo: OperatorFunction.

op1

Tipo: OperatorFunction.

op2

Tipo: OperatorFunction.

op3

Tipo: OperatorFunction.

op4

Tipo: OperatorFunction.

op5

Tipo: OperatorFunction.

op1

Tipo: OperatorFunction.

op2

Tipo: OperatorFunction.

op3

Tipo: OperatorFunction.

op4

Tipo: OperatorFunction.

op5

Tipo: OperatorFunction.

op6

Tipo: OperatorFunction.

op1

Tipo: OperatorFunction.

op2

Tipo: OperatorFunction.

op3

Tipo: OperatorFunction.

op4

Tipo: OperatorFunction.

op5

Tipo: OperatorFunction.

op6

Tipo: OperatorFunction.

op7

Tipo: OperatorFunction.

op1

Tipo: OperatorFunction.

op2

Tipo: OperatorFunction.

op3

Tipo: OperatorFunction.

op4

Tipo: OperatorFunction.

op5

Tipo: OperatorFunction.

op6

Tipo: OperatorFunction.

op7

Tipo: OperatorFunction.

op8

Tipo: OperatorFunction.

op1

Tipo: OperatorFunction.

op2

Tipo: OperatorFunction.

op3

Tipo: OperatorFunction.

op4

Tipo: OperatorFunction.

op5

Tipo: OperatorFunction.

op6

Tipo: OperatorFunction.

op7

Tipo: OperatorFunction.

op8

Tipo: OperatorFunction.

op9

Tipo: OperatorFunction.

op1

Tipo: OperatorFunction.

op2

Tipo: OperatorFunction.

op3

Tipo: OperatorFunction.

op4

Tipo: OperatorFunction.

op5

Tipo: OperatorFunction.

op6

Tipo: OperatorFunction.

op7

Tipo: OperatorFunction.

op8

Tipo: OperatorFunction.

op9

Tipo: OperatorFunction.

operations

Tipo: OperatorFunction[].

toPromise()
3 sobrecargas

Firma

toPromise(): Promise

Parámetros

No recibe ningún parámetro.

Retorna

Promise

Firma

toPromise(PromiseCtor: any): Promise

Parámetros

Retorna

Promise

Firma

toPromise(PromiseCtor: PromiseConstructorLike): Promise

Parámetros

Retorna

Promise

PromiseCtor

Tipo: any.

PromiseCtor

Tipo: PromiseConstructorLike.

Recursos adicionales

Documentación oficial en inglés

Last updated