javascript - 使用 rxjs 时，为什么 switchMap 不触发 complete 事件？

Question

最近，在我的 Angular 应用程序中，我开始在几个不同的场景中使用 rxjs switchMap 运算符。我很快意识到，在使用 switchMap 时，当您订阅此流时，不会触发完成 block (我认为错误 block 也不会)。我在网上看到的所有例子似乎也没有处理完成 block ，我很困惑这是什么原因？

我显然遗漏了一些关于 switchMap 或它如何使用的东西，但我不知道是什么。

理想情况下，我希望调用一个函数来触发一个 Http 请求，然后在错误 block 中处理错误，然后在完成 block 中处理请求后的东西。

这是我正在做的例子:

export class ResultsComponent {

  ngAfterViewInit() {

    Observable.combineLatest(...filters)
        .debounceTime(500)
        .distinctUntilChanged()
        .switchMap((activeFilters: Array<ActiveFilter>) => {
            const filters = this.mapFilters(activeFilters);
            return this.doSearch(this.term$.getValue(), filters);
        })
        .subscribe((res) => {
           this.onSearchSuccess(res);
        },
        (err) => {
            // THIS NEVER FIRES
            console.error(err);
            this.loading$.next(false);
        ,() => {
            // THIS NEVER FIRES
            this.loading$.next(false);
        });
  }

  private doSearch(input: string, filters: object): Observable<object> {
    return this.searchService.search(input, filters);
  }
}

服务

export class SearchService {

  private baseUrl: string = 'http://mydomainhere.com/api';

  constructor(private http: Http) {}

  public search(input: string, filters: object): Observable<object> {
    const params = {
      "keyword": input,
      "filters": filters
    };
    const url = `${this.baseUrl}/search`;
    return this.http.post(url, params)
       .map(res => res.json())
       .catch(this.handleError);
  }
}

Answer 1

对于 switchMap，内部可观察对象的完成不会触发流的完成，除非外部可观察对象已经完成。这是一个说明这一点的例子:

const first = Rx.Observable.interval(2000).take(2)
	.do(console.log.bind(null, 'first next'),
      console.log.bind(null, 'first error'),
      console.log.bind(null, 'first complete'));
const second = Rx.Observable.interval(200).take(2)
	.do(console.log.bind(null, 'second next'),
      console.log.bind(null, 'second error'),
      console.log.bind(null, 'second complete'));

first.switchMap(() => second)
	.subscribe(console.log.bind(null, 'stream next'),
      console.log.bind(null, 'stream error'),
      console.log.bind(null, 'stream complete'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.2/Rx.js"></script>

内部可观察对象中抛出的错误将调用外部可观察对象的错误 block 。这是一个说明这一点的例子:

const source = Rx.Observable.interval(2000).take(4)
	.do(console.log.bind(null, 'source next'),
      console.log.bind(null, 'source error'),
      console.log.bind(null, 'source complete'));
const error = Rx.Observable.create((o) => {
  o.error();
}).do(console.log.bind(null, 'error next'),
      console.log.bind(null, 'error error'),
      console.log.bind(null, 'error complete'));

source.switchMap(() => error)
	.subscribe(console.log.bind(null, 'stream next'),
      console.log.bind(null, 'stream error'),
      console.log.bind(null, 'stream complete'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.2/Rx.js"></script>

因此，如果您愿意，您可以在外部可观察对象上放置一个 catch 并获取错误。

如果你想观察内部可观察对象的完成，那么你必须在 switchMap 内部观察它。

至于为什么您不太了解在线使用完成 block ，我不能代表所有人，但就我个人而言，我发现自己在我的应用程序中并不需要它。我只关心 next 的数据。