在可观察订阅的开头和结尾显示和隐藏加载答案

【问题标题】：Show and hide loading at the beginning and end of the observable subscription在可观察订阅的开头和结尾显示和隐藏加载
【发布时间】：2017-03-29 01:47:52
【问题描述】：

我想在可观察订阅的开始和结束时显示和隐藏加载，但没有成功。我认为这与forkJoin 或switchMap 有关。以下是我尝试过的：

this.query
  .debounceTime(400)
  .distinctUntilChanged()
  .switchMap((query) => {
    // code...
    return Observable.forkJoin(sources);
  })
  .finally(() => console.log('completed')) // never called
  .subscribe((hashtags) => {
    // code...
  }, (error) => {
    console.log(error);
  }, () => {
    console.log('completed'); // never called
  });

【问题讨论】：

你使用的是什么版本的 rxjs？ 5+？
是的，我使用的是 5.0.1

标签： javascript angular reactjs rxjs angular2-observables

【解决方案1】：

forkJoin 的一个非常常见的问题是它的所有源 Observable 都需要发出至少一个值并在 forkJoin 发出任何东西之前完成。

很难说你在switchMap() 内部做什么以及this.query 是什么，但complete 信号和finally() 运算符只有在Observable 链完成时才会被调用。因此，如果您在next 回调（即(hashtags) => { // code... } 函数）中接收项目并且您知道从未打印过completed 字符串，则似乎源永远不会完成，因此finally() 或完整的回调被调用。

【讨论】：

我明白为什么它不起作用，但我该如何解决这个问题？
这取决于我提到的你有哪一个问题
this.query 是一个用于实时搜索的主题，在 switchMap 中我正在进行 http 调用。
所以这是我提到的第二个问题。您可以使用return Observable.forkJoin(sources).finally(...); 并将所有逻辑放在那里。 forkJoin() 在发出其唯一值后立即完成，因此将始终调用此 finally。
它部分工作。当您正在搜索时，但 switchmap 取消了之前的搜索并在不久之后进行了另一次搜索，加载无法正常工作。