catchError 后的 switchMap 不发出值

Question

我正在使用 Angular 和 RxJS。

我打算将一个项目添加到一个集合（第一个 Observable），然后获取该集合（第二个 Observable），所有内容都在同一个数据流中。

然后我将 Observable 提供给组件，子组件通过异步管道接收它。

当第一次 addItem AJAX 调用失败时会出现问题。我试图继续返回整个更新的集合项列表，因此子组件具有新数据，但最后一步从未完成，并且子项在 addItem 失败后永远不会收到集合。

这是我的代码：

public addItem(item) {

  this.itemCollection$ = this.itemService.addItem(item).pipe(
        catchError((err) => {
          this.logger.error('Couldnt add Item to Collection');
          return of();
        }),
        switchMap(() => 
  this.itemsService.getItemsByItemId(this.itemId)));

}

控制台结果：

POST http://localhost:3000/api/XXXX/XXX/XXXXX/items 400 (Bad Request)
ngx-logger.js:245 2019-05-29T17:25:39.557Z ERROR [items-page-module.9c3988b4c0f0dbc7bc65.hot-update.js:319] Couldnt add Item to Collection

所以错误记录在控制台上，但子组件永远不会获得新的项目列表。

尽管出现错误，我应该怎么做 itemCollection$ observable 发出一个项目的集合？

谢谢！

Answer 1

当您调用of()它时，它会创建一个 observable，它不发出任何内容，但会立即完成，因为它没有给出任何参数。问题是switchMap()操作符只会响应发出的值而触发。

因此，以下内容有效地消除了 observable 中的所有错误。

    throwError('ouch').pipe(
        catchError(() => of())
    ).subscribe(()=> {
         console.log('I am never printed');
    }, ()=> {
         console.log('I am never printed');
    }, ()=> {
         console.log('COMPLETED!'); // this will be printed.
    });

在上面的例子中，catchError()过渡到一个空的observable。订阅者回调或错误回调都不会执行。只执行完整的回调。

catchError()永远不会使用存在于 之后的任何运算符，因为没有发出任何内容。

您可以通过发出undefined或任何其他值来解决此问题。

public addItem(item) {
    this.itemCollection$ = this.itemService.addItem(item).pipe(
        catchError((err) => {
          this.logger.error('Couldnt add Item to Collection');
          return of(undefined);
        }),
        switchMap(() => this.itemsService.getItemsByItemId(this.itemId)));
}