typescript - RXJS 订阅完成模式

Question

我发现自己在 Typescript 和 RXJS 中使用了以下模式:

httpCall() : Observable<string> {...}

// set loading = true
httpCall.subscribe(
    (p) => { 
        // do stuff;
    }, 
    (error)=> {
        // display error
        // set loading = false
    }, 
    () => {
        // set loading = false
    });

有什么方法可以防止 //set loading = false 的双重调用？

Answer 1

Cartant 的建议很好，但您也可以通过重构改进设计来解决这个问题。

const stopLoading = () => {
  this.loading = false;
};

const error = (error: any) => {
  // display error
  stopLoading();
};

const next = value => { ... };

httpCall.subscribe({next, error, complete: stopLoading});

注意:

因为我是一个脾气暴躁的人，所以我会注意到，正如我已经做过很多次一样，使用 Observables 来表示 HTTP 请求，对 Angular 来说是糟糕的设计，并且会让生活不必要地变得复杂。它们只返回一个值，这使得它们在 90% 的情况下与 Observables 不匹配。

它还剥夺了我们可爱的 async/await 功能，将我们推回回调 hell 。

这让我很生气。

这是我会做的:

import 'rxjs/add/operator/toPromise';

export default class {
  async ngOnInit() {
    try {
      this.data = await httpCall().toPromise(); 
    } 
    catch (e) {
      console.error(e);
    }
    finally {
      this.loading = false;
    }
  }
}

认真考虑这一点，对于 90% 的 HTTP 场景，它比 RxJS 代码简单 10 倍，阅读本文的任何人都应该非常清楚可维护性优势。