為什么我們需要在 rxjs observable 中實現取消訂閱？

Question

我們是否需要在可觀察的 object 中返回我們自己的拆卸邏輯或取消訂閱方法？

const observable = new Observable(function subscribe(subscriber) {
  // Keep track of the interval resource
  const intervalId = setInterval(() => {
    subscriber.next('hi');
  }, 1000);

  // Provide a way of canceling and disposing the interval resource
  return function unsubscribe() {
    clearInterval(intervalId);
  };
});

原因即使沒有這條線：

  return function unsubscribe() {
    clearInterval(intervalId);
  };

observable.unsubscribe()正在工作。

那么有什么區別。 為什么我們需要那個？

更新即使沒有返回自定義取消訂閱方法，當我取消訂閱時，以下間隔也會自動清除。

   this.myobs$ = new Observable((subscriber) => {
      let count = 0;
      setInterval(() => {
        subscriber.next(count++);
      }, 1000);
    });

this.myobs$.unsubscribe()

在下面的代碼中，我們沒有返回 unsubscribe 方法：

const hello = Observable.create(function(observer) {
  observer.next('Hello');
  observer.next('World');
  observer.complete();
});

在這里，我們將返回：

const evenNumbers = Observable.create(function(observer) {
  let value = 0;
  const interval = setInterval(() => {
    if (value % 2 === 0) {
      observer.next(value);
    }
    value++;
  }, 1000);

  return () => clearInterval(interval);
});

但事實是，即使沒有明確的時間間隔，我的訂閱也會在我取消訂閱時取消（）

Answer 1

因為這是一個很好的練習。 它避免了 memory 泄漏。 想象一個應用程序，其服務向許多偵聽器發送數據，如果您不取消訂閱某個偵聽器，則可觀察對象的每次發送都會導致應用程序接收到不希望的數據。 最佳做法是在需要時訂閱，在您不再需要接收時取消訂閱。

Answer 2

這是為了提供對 Observable 邏輯的自定義拆解。

在這種情況下，您使用的是 setInterval，這是一種瀏覽器方法。因此，當您在沒有自定義取消訂閱的情況下取消訂閱時。 觀察者不會知道，它需要清除間隔，即使您取消訂閱，間隔仍然會運行。

因此需要告訴 observable 當你取消訂閱時， go 和 clearInterval

Answer 3

Observables 沒有取消訂閱方法，您需要訂閱 object 來管理您的訂閱。

const sub = obs$.subscribe(val => { doStuffWithVal(val); });

您的拆解 function 可以使用sub object 取消訂閱sub.unsubscribe() 。

如果你不取消訂閱，那么如果 observable 沒有被垃圾收集並且你的 object 仍然被訂閱，那么你可能會導致 memory 泄漏。

完成 observables 並在完成訂閱后取消訂閱是一種很好的做法。 進行不必要的拆解比 memory 泄漏要好。

Answer 4

因為 observable 不知道需要運行什么才能不監聽不同的事件（例如，interval 是 clearinterval，timeout 是 clearTimeout，event 是 removeEventListener 等）

這就是為什么需要提供要執行的取消監聽/取消訂閱功能以真正清除事情。

為了演示，你應該看到下面的代碼 console.log() 即使在你unsubscribe()之后仍在執行

   this.myobs$ = new Observable((subscriber) => {
      let count = 0;
      setInterval(() => {
        // it should continue to run even after unsubscribe
        console.log('interval running')
        subscriber.next(count++);
      }, 1000);
    }).subscribe();

this.myobs$.unsubscribe()