Что такое подписки RxJS?

Подписка в RxJS - это одноразовый ресурс, который обычно представляет собой выполнение Observable. У него есть метод unsubscribe, который позволяет нам избавиться от ресурса, удерживаемого подпиской, когда мы закончим.

В более ранних версиях RxJS он также назывался «Disposable».

Основное использование

Базовый пример подписки можно увидеть в следующем коде:

import { of } from "rxjs";
const observable = of(1, 2, 3);
const subscription = observable.subscribe(val => console.log(val));
subscription.unsubscribe();

В приведенном выше коде subscription, возвращаемый, когда мы вызываем subscribe в Observable, - это subscription. У него есть метод unsubscribe, который мы вызвали в последней строке для очистки, когда Observable отписался.

Объединение подписок

Мы можем комбинировать подписки с методом add, который поставляется с объектами подписки.

Например, если у нас есть 2 наблюдаемых:

import { of } from "rxjs";
const observable1 = of(1, 2, 3);
const observable2 = of(4, 5, 6);
const subscription1 = observable1.subscribe(val => console.log(val));
const subscription2 = observable2.subscribe(val => console.log(val));
subscription1.add(subscription2);

В приведенном выше коде у нас есть 2 подписки, subscription1 и subscription2, которые мы объединили вместе с add методом subscription1.

subscription1 является родителем subscription2.

Мы должны получить

1
2
3
4
5
6

как выход.

Когда мы объединяем Подписки вместе, мы можем отказаться от подписки на все Подписки, которые были объединены вместе, вызвав unsubscribe для первой Подписки, для которой вызывается метод add.

Например, если у нас есть:

import { interval } from "rxjs";
const observable1 = interval(400);
const observable2 = interval(300);
const subscription = observable1.subscribe(x => console.log(x));
const childSubscription = observable2.subscribe(x => console.log(x));
subscription.add(childSubscription);

Затем вызов unsubscribe на subscription отменит подписку на все объединенные подписки.

setTimeout(() => {
  subscription.unsubscribe();
}, 1000);

Отмена дочерних подписок

Мы можем отменить дочерние подписки с помощью remove метода подписки. В качестве аргумента требуется дочерняя подписка.

Чтобы использовать его, мы можем написать что-то вроде следующего кода:

import { interval } from "rxjs";
const observable1 = interval(400);
const observable2 = interval(300);
const subscription = observable1.subscribe(x => console.log(x));
const childSubscription = observable2.subscribe(x => console.log(x));
subscription.add(childSubscription);
(async () => {
  await new Promise(resolve => {
    setTimeout(() => {
      subscription.remove(childSubscription);
      resolve();
    }, 600);
  });
  await new Promise(resolve => {
    setTimeout(() => {
      subscription.unsubscribe();
      childSubscription.unsubscribe();
      resolve();
    }, 1200);
  });
})();

После удаления childSubscription он больше не является дочерним по отношению к subscription Подписке.

Поэтому мы должны позвонить unsubscribe для обеих подписок по отдельности, чтобы очистить обе подписки, как только мы закончим.

Подписки позволяют нам получать значения, передаваемые из Observable. Мы можем объединить несколько подписок вместе с методом add, который принимает дочернюю подписку в качестве аргумента.

Когда они будут объединены, мы сможем отписаться от них вместе.

Мы можем удалить Подписку как дочернюю по отношению к другой Подписке с помощью метода remove.