Rxjs中处理和获取错误是怎样的
|
本篇内容介绍了“Rxjs中处理和抓取错误是怎样的？”的有关知识，在实际项目的操作过程或是学习过程中，不少人都会遇到这样的问题，接下来就让小编带大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！ 使用 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 不去触发组件中的错误。 （编辑：银川站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
