Angular 8应用程序中发生错误后未调用Finalize

时间:2019-10-31 07:26:59

标签: angular http rxjs

我正在尝试在Angular 8中构建一个angular-app,我从后端获得了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,我想用它来做多件事。

当我尝试到达后端,但离线时,我什么都没得到作为函数的返回值。所以这是我的问题:

发生这种情况时,我尝试调用finalize函数。但是出现错误后不会调用此函数。

有什么解决办法吗?

3 个答案:

答案 0 :(得分:0)

RxJS习惯将结果存储在订阅中,而不是使用tapcatchError将中间值存储为“副作用”。这主要是因为副作用更难于单独测试。

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

答案 1 :(得分:0)

我自己做的。我只是更改了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();

但是谢谢您的帮助。

答案 2 :(得分:0)

谢谢您的提问。

catchError()

The official definition是:

  

通过返回新的可观察对象或引发错误来捕获要处理的可观察对象上的错误。

或者换句话说,此操作符的主要思想是在发生某些错误的情况下返回一个新的可观察值。如果需要,我可以提供带有业务逻辑的代码示例。

finalize() operator的想法是在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)
)

如果您对更详细的解释感兴趣,请访问: 这是一篇不错的blog帖子 ,有关错误处理。

我希望它有用。我想听听您的任何反馈。祝你有美好的一天!