Rxjs 中處理錯誤和抓取錯誤的程式碼案例

2022-08-20 14:00:45

場景

我們的應用中使用了一個服務，用來獲取啤酒列表資料，然後將它們的第一個資料作為標題展示。

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