Finalize не вызывается после ошибки в приложении Angular 8

Question

Я пытаюсь создать Angular-приложение в Angular 8, где я получаю из бэкэнда Observable и хочу подписаться на него. Это мой код, который у меня уже есть:

this.employeesService.getEmployees$()
      .pipe(
        tap(employees => {
          this.employees = employees;
          console.log(this.employees.length);
        }),
        catchError(err => this.error = err),
        finalize(() => {
          console.log(this.error);
          this.isOperationInProgress = false;
        })
      )
      .subscribe();

this.employeesService.getEmployees$()

Эта функция возвращает Observable, с которой я хочу создать несколько вещей.

Когда я пытаюсь связаться с бэкэндом, но он не работает, я не получаю ничего в качестве возвращаемого значения моей функции. Вот моя проблема:

Когда это происходит, я пытаюсь вызвать функцию финализации. Но эта функция не вызывается после ошибки.

Есть идеи, как это исправить?

Answer 1

Я сделал это сам. Я только что изменил предложение catchError и предложение finalize.

this.employeesService.getEmployees$()
      .pipe(
        tap(employees => {
          this.employees = employees;
          console.log(this.employees.length);
        }),
        finalize(() => {
          this.isOperationInProgress = false;
        }),
        catchError(err => {
          this.error = err;
          return this.employees;
        })
      )
      .subscribe();

Но спасибо за помощь.

Answer 2

спасибо за ваш вопрос.

Официальное определение оператора catchError():

Ловит ошибки в наблюдаемой для обработки путем возврата новой наблюдаемой или выдачи ошибки.

Или, другими словами, основная идея этого оператора - возвращать новую наблюдаемую в случае, если произошла какая-то ошибка. Я могу предоставить пример кода с бизнес-логикой, если хотите.

Идея оператора finalize() состоит в том, чтобы обеспечить возможность запуска побочных эффектов после завершения Observable. Из-за ошибки или просто завершения.

Итак, если вы хотите показать сообщение об ошибке, когда ваша служба BE недоступна, ваш код должен выглядеть примерно так:

this.isOperationInProgress = true;
// I do not recommend the '$' symbol for service methods. But, it's up to you
this.employeesService.getEmployees().pipe(
   tap(console.log),
   finalize(() => this.isOperationInProgress = false)
).subscribe(
    employees => this.employees = employees, 
    error => this.showErrorMesage(error.message)
)

Если выЗаинтересованы в более подробных объяснениях: Вот отличный блог пост об обработке ошибок.

Надеюсь, это было полезно. Я хотел бы услышать любые отзывы от вас. Хорошего дня!

Answer 3

Для RxJS более идиотично хранить результаты в подписке, а не сохранять промежуточные значения в качестве «побочного эффекта», используя tap или catchError. Это происходит главным образом потому, что побочные эффекты труднее тестировать в изоляции.

this.employeesService.getEmployees$()
.pipe(
    take(1)
)
.subscribe(
    employees => {
        this.employees = employees;
        this.isOperationInProgress = false;
    },
    error => {
        this.error = error;
        this.isOperationInProgress = false;
    }
); 

Это сказано;Причина, по которой ваш finalize не вызывается, заключается в том, что catchError всегда должен возвращать Observable, а не void.