switchMap после catchError не выдает значения

Question

Я использую Angular и RxJS.

Я намереваюсь добавить элемент в коллекцию (1-я наблюдаемая), а затем получить коллекцию (2-я наблюдаемая), все в одном потоке данных.

Затем я предлагаю компоненту 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(), это создает наблюдаемое, которое испускает ничего, но сразу завершается, потому что ему не было дано никаких аргументов. Проблема в том, что оператор switchMap() сработает только в ответ на выданное значение.

Следовательно, следующие эффективно заставляют замолчать все ошибки в наблюдаемой.

    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() переходит в пустую наблюдаемую. Ни обратный вызов абонента, ни обратный вызов ошибок не выполняются. Выполняется только полный обратный вызов.

Все операторы, которые существуют после 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)));
}