脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Rxjs 错误处理

Rxjs 中处理错误和抓取错误的代码案例

 更新时间：2022年08月20日 11:19:25   作者：Jimmy  
这篇文章主要介绍了Rxjs 中怎么处理和抓取错误,本文，我们学习了如何使用 catchError 在数据流中抓取错误，怎么去修改和返回 observable，或者使用 EMPTY 不去触发组件中的错误，需要的朋友可以参考下

使用 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 不去触发组件中的错误。

本文是译文，采用意译的形式。原文地址这里

到此这篇关于Rxjs 中怎么处理和抓取错误的文章就介绍到这了,更多相关Rxjs 错误处理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 执行iframe中的javascript方法

    执行iframe中的javascript方法

    如何调用执行iframe中的方法？如下
    2008-10-10
  • 微信小程序 点击切换样式scroll-view实现代码实例

    微信小程序 点击切换样式scroll-view实现代码实例

    这篇文章主要介绍了微信小程序 点击切换样式scroll-view实现代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • Javascript仿PHP $_GET获取URL中的参数

    Javascript仿PHP $_GET获取URL中的参数

    这篇文章主要介绍了Javascript仿PHP $_GET获取URL中的参数代码实例,需要的朋友可以参考下
    2014-05-05
  • JavaScript中常见内置函数用法示例

    JavaScript中常见内置函数用法示例

    这篇文章主要介绍了JavaScript中常见内置函数用法,结合实例形式分析了JavaScript常用内置函数的功能、参数、使用方法及相关操作注意事项,需要的朋友可以参考下
    2018-05-05
  • JS字符串按逗号和回车分隔的方法

    JS字符串按逗号和回车分隔的方法

    下面小编就为大家带来一篇JS字符串按逗号和回车分隔的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • JS对象复制(深拷贝和浅拷贝)

    JS对象复制(深拷贝和浅拷贝)

    这篇文章主要介绍了JS对象复制(深拷贝和浅拷贝)，并附有详细代码，感兴趣的小伙伴们，可以参考下
    2021-04-04
  • 图解js图片轮播效果

    图解js图片轮播效果

    这篇文章主要以图片展示的方式向大家讲解了js图片轮播效果的实现方法，对图片轮播实现原理进行了详细介绍，感兴趣的朋友可以参考一下
    2015-12-12
  • layui框架中layer父子页面交互的方法分析

    layui框架中layer父子页面交互的方法分析

    这篇文章主要介绍了layui框架中layer父子页面交互的方法,结合实例形式分析了layer父子页面交互的常用技巧以及layer弹出多个iframe找到父页面的操作方法,需要的朋友可以参考下
    2017-11-11
  • JavaScript中let与const命令使用

    JavaScript中let与const命令使用

    本文主要介绍了JavaScript中let与const命令使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • 无刷新上传文件并返回自定义值

    无刷新上传文件并返回自定义值

    本文给大家简单分享了一下个人项目中解决无刷新上传文件的方法和示例，有需要的小伙伴可以参考下。
    2015-06-06

最新评论