Mandy's Web

文章導覽

  • 轉換為的 Observable

  • first

  • take(1)

  • takeUntil

  • unsubscribe

  • 使用 Async Pipe

  • 有限的 Observable


Rxjs 各種解訂閱方式

昨天說到了將資料訂閱出來渲染在頁面上的事,那麼就就來說說 RxJs 解訂閱這件事吧。 這也是為了避免 memory leak,或重覆訂閱所造成的 BUG,若非有限訂閱,通常在訂閱離開後,都需要解訂閱。


轉換為的 Observable

first

只執行第一次,通常用於第一次進來讀取成功取得資料後,就不需再次執行

export class RxjsOndestroyComponent implements OnInit, OnDestroy {
  private destroy$: Subject<boolean> = new Subject();
  private timer$: Observable<number> = timer(0, 1000);

  constructor() {}

  ngOnInit(): void {
    this.timer$.pipe(first()).subscribe((time) => {
      console.log("time", time);
      this.count = time;
    });
  }
}

take(1)

只發生一次

export class RxjsOndestroyComponent implements OnInit, OnDestroy {
  private destroy$: Subject<boolean> = new Subject();
  private timer$: Observable<number> = timer(0, 1000);

  constructor() {}

  ngOnInit(): void {
    this.timer$.pipe(first()).subscribe((time) => {
      console.log("time", time);
      this.count = time;
    });
  }
}

take1 與 first 差異


takeUntil

持續執行,直到離開

export class RxjsOndestroyComponent implements OnInit, OnDestroy {
  private destroy$: Subject = new Subject<void>();
  private timer$: Observable<number> = timer(0, 1000);

  constructor() {}

  ngOnInit(): void {
    this.timer$.pipe(takeUntil(this.destroy$)).subscribe((time) => {
      console.log("time", time);
    });
  }

  ngOnDestroy(): void {
    this.onDestroy$.next();
    this.onDestroy$.complete();
  }
}

unsubscribe

export class RxjsOndestroyComponent implements OnInit, OnDestroy {
  private subscription: Subscription = new Subscription();
  private timer$: Observable<number> = timer(0, 1000);

  constructor() {}

  ngOnInit(): void {
    this.subscription.add(
      this.timer$.subscribe((time) => {
        console.log("time", time);
      })
    );
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }
}

使用 Async Pipe

template

<div>{{ timer$ | async }}</div>

ts

export class RxjsOndestroyComponent implements OnInit, OnDestroy {
  timer$: Observable<number> = timer(0, 1000).pipe(
    tap((time: number) => console.log("time", time))
  );
}

當 component 離開時,AsyncPipe 會自動取消訂閱


有限的 Observable

在 Angular 裡,有一些 Observable 離開後就會自動取消訂閱

裡面包含了:

  • HTTP
  • router 與 ActivatedRoute
  • reactive forms 裡的 valueChanges 與 statusChanges

參考資料: Angular 中的可觀察物件


對這篇文章有什麼想法嗎?

Copyright © 2022 Mandy. All rights reserved. Build with Angular