javascript - RxJS 中的 Promise 'finally' 回调等价物

Question

我有一个组件可以从 API 获取一些数据。该组件有一个 loading 成员变量，用于确定是否应显示加载图标。数据获取完成后，loading 设置为 false，以隐藏加载图标。无论是否发生错误，这都应该发生。

目前，我是这样实现的:

export class MyComponent implements OnInit {

  loading = true;
  data;

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.dataService.getData().subscribe(data => {
      this.data = data;
      this.loading = false;
    },
    () => {
      this.loading = false;
    });
  }

}

我想知道是否有办法消除 this.loading = false 的重复。如果我使用 Promises，这就是我要使用的 Promise.finally()回调 - 但我不是。 RxJS 中是否有等效项或更好的实现方法？

Answer 1

从 RXJS 5.5 开始，使用“finalize”运算符:

ngOnInit() {
  this.dataService.getData()
  .pipe(
    finalize(() => this.loading = false)
  )
  .subscribe(data => {
    this.data = data;
  });
}