Angular4最佳实践之unsubscribe

Angular4最佳实践之unsubscribe

Angular4中引入Observable处理各种常用异步操作,如EventEmitter、HttpClient、Router以及响应式表单Form,实际开发中也会自定义Observable对象,通过订阅Observable对象可以实现数据通信,并在组件注销时取消订阅。


本文将介绍3种取消订阅的方法,并分别整理几种需要手动取消和不需要手动取消的场景。

目录


  • 为什么要取消订阅

  • 如何取消订阅

  • 不需要手动取消的场景

  • 需要手动取消的场景

为什么要取消订阅?

和Javascript中的addEventLister一样,Angular中一旦订阅了Observable对象,在组件destory时就应该及时取消订阅,否则会造成内存泄露或其他不必要的操作


下面这个例子通过PageService订阅refresh事件,返回一个Observable对象,当发布refresh时,请求用户信息。这里为了演示,延迟了10秒钟,若此时通过路由跳转到其他页面,IndexComponent将销毁,但是10秒后,请求依然会发出。也就是说组件销毁了,组件内的订阅并没有自动销毁,需要手动进行取消订阅。

export class IndexComponent implements OnInit {
    constructor(private page: PageService, user:UserService) {}
    ngOnInit() {
        this.page.refresh.delay(10000).subscribe(() => {
              this.user.getUser();
        });
      }
}

如何取消订阅?

组件销毁前,需要通过OnDestroy生命钩子进行取消订阅可观察对象,有3种方法可以实现:

1 unsubscribe()

private subscription: Subscription;
constructor(private page: PageService, user:UserService) {}
ngOnInit() {
    this.subscription = this.page.refresh.subscribe(() => {
        this.user.getUser();
    });
}
ngOnDestroy(){
    this.subscription.unsubscribe();
}

当组件中存在多个subscription时,要一个一个进行unsubscribe未免有些麻烦,有2种方式可以简化代码。

1) 通过subscription.add()添加子subscription

subscription.add()通过将多个subscription添加为子subscription,当取消父subscription时,子subscription也将自动取消,该方法要求必须先执行第一个subscription。

ngOnInit() {
    // 订阅第一个可观察对象-parent
    this.subscription = this.page.refresh.subscribe(() => {
      this.user.getUser();
    });
    // 将第二个可观察对象添加为子对象-child
    this.subscription.add(this.page.load.subscribe(() => {
      this.user.getData();
    }));
}
ngOnDestroy(){
      // 同时取消2次订阅
      this.subscription.unsubscribe();
}
2)定义subscription数组,组件销毁时依次取消订阅
private subscriptions: Subscription[]=[];
ngOnInit() {
    this.subscriptions.push(this.page.refresh.subscribe(() => {
      this.user.getUser();
    }));
    this.subscriptions.push(this.page.load.subscribe(() => {
      this.user.getData();
    }));
}
ngOnDestroy() {
    this.subscriptions.forEach(sub => sub.unsubscribe());
}

2 takeWhile()

Observable对象的[takeWhile]方法将对数据流进行操作,表示:持续发出值,当传入表达式结果为false时,停止发出值。例子中定义了一个组件销毁标识destroy,当destroy==true时,可观察对象发出的值将不再流向该组件。该方法较简洁,推荐使用

takeWhile(predicate: function(value, index): boolean): Observable
destroy: boolean = false;  // 组件销毁标识
ngOnInit() {
    this.page.refresh.takeWhile(() => !this.destroy).subscribe(() => {
        this.user.getUser();
    });
}
ngOnDestroy() {
       this.destroy = true;
}

3 takeUntil()

Observable对象的[takeUntil]方法将对数据流进行操作,表示:持续发出值,当传入 observable 发出值时,停止发出值。该方法需要传入另一个Observable,在组件销毁时发出值,进而取消订阅。

takeUntil(notifier: Observable): Observable
private unsubscribe = new Subject();
ngOnInit() {
    this.page.refresh.takeUntil(this.unsubscribe).subscribe(num => {
        this.user.getUser();
    });
}
ngOnDestroy() {
    this.unsubscribe.next();  // 所有subscription结束
    this.unsubscribe.complete();  // 传入observable结束
}

不需要手动取消的场景

Angular中有些场景已进行unsubscribe或通过Observable.complete()的方式结束订阅数据流,在开发中并不需要手动再进行处理订阅。

1) Async pipe

AsyncPipe 会订阅一个可观察对象或承诺,并返回其发出的最后一个值。当发出新值时,该管道就会把这个组件标记为需要进行变更检查的。当组件销毁时,自动取消订阅。如果只是模板中需要的变量,采用Async是最佳实践

The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted. When a new value is emitted, the async pipe marks the component to be checked for changes. When the component gets destroyed, the async pipe unsubscribes automatically to avoid potential memory leaks.
@Component({
    selector: 'index',
    template: `
refreshTime: {{ refreshTime | async }}
` }) export class IndexComponent implements OnInit { refreshTime: Observable; constructor(private page: PageService) {} ngOnInit() { this.refreshTime = this.page.refresh(); } }
2) HostListener

通过@HostListener进行订阅的事件,和直接在模板里订阅事件一样,也是自动取消的。

3) EventEmitter

EventEmitter 类派生自 Observable,Angular 提供了一个 EventEmitter 类,它用来从组件的 @Output() 属性中发布一些值。

4) 有限的Observable

有限的Observable指的是发出的值是有限的,如timer。

5) Http

http在load事件完成之后进行responseObserver.complete(),自动结束数据流,下面是Http源码中的部分代码。

const onLoad = (event) => {
    ...
     responseObserver.next(new Response(responseOptions));
    responseObserver.complete();
};
script.addEventListener('load', onLoad);

需要手动取消的场景

1) Router

Angular在组件销毁时并没有取消router的所有订阅事件,同样是延迟10秒,可以看到请求依然是会发出的。

ngOnInit() {
    this.subscription = this.router.queryParamMap.delay(10000).subscribe((param) => {
        this.user.getUser(+param.get(id));
    });
}
ngOnDestroy() {
    this.subscription.unsubscribe();
}
2) Forms

表单中的valueChanges和statusChanges等Observable都需要手动取消。

ngOnInit() {
    this.form = new FormGroup({...});
    this.subscription  = this.form.valueChanges.subscribe(() => {});
}
ngOnDestroy() {
    this.subscription.unsubscribe();
}
3) Renderer Service
constructor(private renderer: Renderer2, private element : ElementRef) { }
    ngOnInit() {
    this.subscription = this.renderer.listen(this.element.nativeElement, "click", () => {});
}
ngOnDestroy() {
    this.subscription.unsubscribe();
}
4) fromEvent()、interval()等输出值可能为无限个的可观察对象
destroy: boolean = false;  // 组件销毁标识
ngOnInit() {
    Observable.interval(1000).takeWhile(() => !this.destroy).subscribe(() => {}));
    Observable.fromEvent(this.element.nativeElement, 'click').takeWhile(() => !this.destroy).subscribe(() => {}));
}
ngOnDestroy() {
       this.destroy = true;
}
5) 自定义Observable

所有自定义Observable必须在组件销毁前手动取消。

结束语

在实践中,要时刻记得取消可观察对象的订阅,如果只是模板中需要的变量,采用Async是最佳实践,其次是通过takeWhile()takeUntil()手动取消订阅。

参考文献

  1. https://angular.cn/guide/obse...;br/>
  2. https://netbasal.com/when-to-...;br/>
  3. https://blog.angularindepth.c...;br/>
  4. http://brianflove.com/2016/12...


你可能感兴趣的:(Angular4最佳实践之unsubscribe)