Привет Девс,

Добро пожаловать обратно во 2-й поток/рассказ серии RxJS. В прошлой истории я объяснялНаблюдаемые, сегодня давайте углубимся в термин Наблюдатель и Подписка.

Я предполагаю, что у вас есть базовые знания Observables. Если нет, то обратитесь к этой истории.

Если вы читали предыдущую статью, то я использовал этот пример, чтобы дать вам общее понимание→ «Представьте, что Observables — это резервуар для воды (наполненный водой), Наблюдатель в виде трубы (по ней течет поток воды) и Водопроводный кран для подписки/отписки потока воды». Я тоже использовал тот же пример в этой теме.

Наблюдатель

  1. Согласно официальному документу→, Наблюдатель — это потребитель значений, предоставляемых Наблюдаемым.Давайте попробуем разобрать это и понять, как мы можем рассматривать Наблюдатель как трубу, по которой течет поток воды, а с помощью водопроводного крана мы подписываемся/отписываемся на воду. Итак, с помощью Observer мы потребляем значение, выдаваемое Observable, значение может быть любым, например, числом, строкой, объектом и т. д.

2. Это объект и имеет следующие свойства с 3 функциями обратного вызова→

SafeSubscriber {
  //1
  initialTeardown: undefined,
  //2
  closed: false,
  //3
  _parentage: null,
  //4
  _finalizers: null,
  //5
  isStopped: false,
  //6
  destination: ConsumerObserver {
    partialObserver: { next: undefined, error: undefined, complete: undefined }
  }
}

Если вы видите 6-й комментарий, у него есть свойство назначения, которому снова назначается объект с именем "ConsumerObserver", у которого есть свойство "partialObserver", которое имеет 3 обратных вызова→ «Далее, ошибка, завершено».

3. Обозреватели в RxJS также могут быть частичными,относится к тому факту, что не все три функции обратного вызова (следующая, ошибка, полная) в объекте Observer должны быть определены, когда подписка на Observable. В зависимости от нашего варианта использования мы можем определить один или несколько обратных вызовов.

numberStream.subscribe({
    //defined the next callback
    next:(v)=>console.log(v)
});
numberStream.subscribe({
    //defined the next callback
    next:(v)=>console.log(v),
    //defined the complete callback
    complete:()=>console.log("Completed")
});

Подписка

  1. Это не что иное, как одноразовый ресурс. Он позволяет нам управлять жизненным циклом наблюдения, включая запуск и остановку потока данных. Раньше он назывался Одноразовый, теперь Подписной.
  2. Это объект, который возвращается, когда мы вызываем метод subscribe() для Observable.
const unsubscribe=numberStream.subscribe({
    next:(v)=>console.log(v),
});

console.log(unsubscribe);

-----Subscription Object Structure-----
// SafeSubscriber {
//     initialTeardown: undefined,
//     closed: true,
//     _parentage: null,
//     _finalizers: null,
//     isStopped: true,
//     destination: null
//  }

3. Он имеет 3 метода→ добавить(), удалить() и отказаться от подписки().

Давайте попробуем разобраться, может быть такое условие, когда мы хотим добавить 2 и более подписки в одну или хотим удалить подписку или хотим отписать все ресурсы сразу.

import { Observable, Subscription } from "rxjs";

const numberStream = new Observable((subscriber) => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
});


const observer=({
    next:(v)=>console.log(v)
});

const childSubscription1=numberStream.subscribe(observer);
const childSubscription2=numberStream.subscribe(observer);

//created parent subscription
const parentSubscription=new Subscription();

//added both the child subscription
parentSubscription.add(childSubscription1);
parentSubscription.add(childSubscription2);



//unsubscribed the parent subscription.
//unsubscribing the parent subscritption, unsubscibe the both child subscription.
parentSubscription.unsubscribe();
//prints
1
2
3
1
2
3

Итак, это все о "Наблюдателе" и "Подписке" в RxJS. Я буду освещать другие темы, связанные с ним в ближайшие дни.

Если вам понравилась эта история, хлопните в ладоши, а в случае возникновения каких-либо вопросов дайте мне знать в разделе ответов.

Подпишитесь на меня в LinkedIn

На простом английском

Спасибо, что являетесь частью нашего сообщества! Прежде чем уйти: