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});

注意：

因为我是个笨蛋，我会注意到，正如我多次使用Observable来表示HTTP请求一样，Angular的部分设计不好，使生活变得不必要复杂。它们只返回一个值，这使得它们在90％的时间内对于Observable来说都是一个丑陋的不匹配。

它也剥夺了我们可爱的async / await功能，让我们回到了回调的地狱。

这让我很生气。

以下是我要做的事情：

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倍，并且读取此内容的任何人都应该非常清楚可维护性优势。

Answer 2

使用＆＃39;做＆＃39;那个运营商

httpCall.do((data) => {
// Do smth
}).subscribe...

RXJS订阅完成模式

2 个答案: