介绍
在您的 Angular 应用或库中，您的代码经常在很多地方容易出错。基于事件的编程是 JavaScript 工作流的核心，许多应用的核心是处理和响应用户触发的事件。正是围绕这些事件的未知变化导致了许多此类错误。
那么，您如何处理 Angular 应用或库中的错误？有没有一种比更命令式的 try/catch 方法更实用的方法来处理错误？
在本指南中，您将了解如何使用 RxJS 及其提供的catchError操作符处理各种错误。
注意：自 RxJS 版本 >=5.5 开始，catch操作符现在名为catchError。
捕获基于事件的错误
假设您有一个SharkComponent，负责记录用户在页面上的点击、进行一些计算并存储结果位置。此组件如下所示：
import { Component } from '@angular/core';
import { SharkService } from 'app/services/sharks';
import { Shark } from 'app/models/shark';
@Component({
selector: 'app-sharks',
template: `
<ul *ngFor="let shark of sharks$ | async">
<button (click)="lastBiteLocation$ = shark.bite($event)">{{ shark.name }}</button>
</ul>
`
})
export class SharksComponent {
sharks$: Observable<Shark[]>;
lastBiteLocation$: Observable<{ x: number, y: number }>;
constructor(private sharkService: SharkService) {
this.sharks$ = this.sharkService.getSharks();
}
}
每条鲨鱼都有一个bite方法，用于处理每次用户点击鲨鱼按钮时传递到该方法中的MouseEvent 。 bite方法如下所示：
bite(event: MouseEvent): Observable<{ x: number, y: number}> {
// Performing calculations here - getX or getY may throw an error!
const x = this.getX(event),
y = this.getY(event);
return of({ x, y }); // Use RxJs 'of' helper here to create an Observable
}
但是等等—— bite方法可能会抛出错误！如果在订阅lastBiteLocation$字段时发生错误，那就不好了！那么你该如何处理呢？当然是用catchError！看看这个改进后的bite方法：
bite(event: MouseEvent): Observable<{ x: number, y: number}> {
return of({ x: 0, y: 0 })
.pipe(
map(loc => {
return {
x: this.getX(event),
y: this.getY(event)
};
}),
catchError(error => {
// Handle our error here...
console.error(error);
return of({ x: 0, y: 0 }); // Return our default location!
});
);
}
现在您可以安全地调用bite，并确保任何错误都会得到处理。默认的{x: 0, y: 0}位置将始终返回给您。
捕获自定义错误
上一节非常有用。但是，如果您希望bite方法在发生错误时抛出错误，该怎么办？假设您想在这种情况下向用户显示自定义错误消息。好吧，您可以使用 RxJS throwError运算符来实现这一点。您现在可以将bite方法更改为：
bite(event: MouseEvent): Observable<{ x: number, y: number}> {
return of({ x: 0, y: 0 })
.pipe(
map(loc => {
return {
x: this.getX(event),
y: this.getY(event)
};
}),
catchError(error => {
console.error(error);
return throwError(new Error('This shark did not bite correctly!'));
});
);
}
就这样！现在你可以通过订阅lastBiteLocation$ observable 来处理SharkComponent上游的错误，如下所示：
this.lastBiteLocation$
.subscribe(
location => {
// We have a location to handle here!
},
error => {
// Now we can handle our custom bite error and show it in the UI!
this.biteError = error;
}
);
结论
在本指南中，您学习了如何从功能上处理 Angular 应用或库中可能容易出错的部分，以及如何以响应方式使用 RxJS 和catchError运算符。具体来说，您现在可以对以下方面充满信心：
- 使用反应流捕获不可预测的错误
- 创建和捕获自定义错误
有关处理 Angular 中的错误（特别是 HTTP 错误）的更多提示，你可以查看本指南
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
