Rxjs 错误处理
Jimmy 人气:0使用 Rxjs
,对于初学者来说,当我们处理 observables
错误的时候容易疑惑,因为我们会考虑使用 try-catch
方式捕获。但是,Rxjs
是通过操作符来管理错误。
我们通过代码案例一步步来了解。案例是使用 angular httpClient
模块来讲解,当然这适用于任何数据流。
场景
我们的应用中使用了一个服务,用来获取啤酒列表数据,然后将它们的第一个数据作为标题展示。
import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; @Injectable() export class BeerService { private apiUrl = 'https://api.punkapi.com/v2/beers'; constructor(private http: HttpClient) {} getBeers(): Observable<any> { return this.http.get(this.apiUrl); } }
应用的组件订阅了它,展示啤酒列表,然后获取其第一条数据。
import { Component, OnInit } from '@angular/core'; import { BeerService } from './beer.service'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent implements OnInit { title = 'my first beer'; beers = []; constructor(private beerService: BeerService) {} ngOnInit() { try { this.beerService.getBeers().subscribe((beers) => { console.log(beers); this.beers = beers; this.title = beers[0].name; }); } catch (err) { this.title = 'Ups a error'; } } }
如果 API
错误了会发生什么呢?我们将该 URL
改成一个错误的 URL
,通过某种策略来捕获错误。
使用 try-catch
在 Javascript
中,我们使用 try-catch 来验证代码片段,如果某些片段出错了,我们就会捕获到它。
但是,在 rxjs
中,try-catch
没用效果。因为错误是发生在订阅范围(subscribe scope),所以 try-catch
解决不了什么,我们需要使用 Rxjs
操作符。
export class AppComponent implements OnInit { title = 'my first beer'; beers = []; constructor(private beerService: BeerService) {} ngOnInit() { try { this.beerService.getBeers().subscribe((beers) => { console.log(beers); this.beers = beers; this.title = beers[0].name; }); } catch (err) { this.title = 'Us a error'; } } }
订阅中谁抓取错误
理解 try-catch
为什么不起作用,记住,当我们订阅第一个 observable
的时候,订阅会调起三个可选的参数。
this.beerService .getBeers() .subscribe({ next: (beers) => { console.log(beers); this.beers = beers; this.title = beers[0].name; }, error: (e) => { console.log(e); this.title = 'ups'; }, complete: () => console.log('done'), });
next
:数据流被成功捕获调用error
:发送一个Javascript
错误或者异常complete
当数据流完成时候调用
所以,错误是发生在订阅函数的区域,所以我们怎么出了呢?
使用 Rxjs 的操作符
Rxjs
提供了一些操作符帮助我们处理这些错误,每个都可以使用在这些场景中,我们来了解下。
我们将接触 catchError
,throwError
和 EMPTY
。
catchError
catchError
抓取错误,但是会发出值。简而言之,它在错误的基础上返回另一个 observable
。
我移除上面提到的三个回调函数的策略,然后配合管道来使用 catchError
操作符。
更多相关 pipe
this.beerService .getBeers() .pipe(catchError(() => of([{ name: 'my default beer' }]))) .subscribe((beers) => { console.log(beers); this.beers = beers; this.title = beers[0].name; });
如果我们的代码中错误时候需要调用其他内容,
catchError
非常适合发出默认值,并且订阅可以将默认值抛出去。
throwError
有时候,我们不想抛出错误,但是想要提示错误信息。针对这个场景,throwError
很适合我们。
throwError
不会触发数据到 next
函数,这使用订阅者回调的错误。我们我们想捕获自定义的错误或者后端提示的错误,我们可以使用订阅者中的 error
回调函数。
ngOnInit() { this.beerService .getBeers() .pipe( catchError(() => { return throwError(() => new Error('ups sommething happend')); }) ) .subscribe({ next: (beers) => { console.log(beers); this.beers = beers; this.title = beers[0].name; }, error: (err) => { console.log(err); }, }); }
更多相关 throwError
EMPTY
有时候,我们不想在组件中传播错误。Rxjs
提供了 EMPTY
常量并返回一个空的 Observable
,并未抛出任何的数据到订阅着回调中。
this.beerService .getBeers() .pipe( catchError(() => { return EMPTY; }) ) .subscribe({ next: (beers) => { this.beers = beers; this.title = beers[0].name; }, error: (err) => console.log(err), });
更多相关 EMPTY
总结
本文,我们学习了如何使用 catchError
在数据流中抓取错误,怎么去修改和返回 observable
,或者使用 EMPTY
不去触发组件中的错误。
本文是译文,采用意译的形式。原文地址这里
加载全部内容