使用 RxJS 响应式地处理错误

2020-08-03 08:00:00 · 飞浪

介绍在您的Angular应用或库中，您的代码经常在很多地方容易出错。基于事件的编程是JavaScript工作流的核心，许多应用的核心是处理和响应用户触发的事件。正是围绕这些事件的未知变

介绍

在您的 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 错误）的更多提示，你可以查看本指南

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

使用 RxJS 响应式地处理错误

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

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(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(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(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!')); }); ); }

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; } );