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

應(yīng)用的組件訂閱了它，展示啤酒列表，然后獲取其第一條數(shù)據(jù)。

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 錯誤了會發(fā)生什么呢？我們將該 URL 改成一個錯誤的 URL，通過某種策略來捕獲錯誤。

使用 try-catch

在 Javascript 中，我們使用 try-catch 來驗證代碼片段，如果某些片段出錯了，我們就會捕獲到它。

但是，在 rxjs 中，try-catch 沒用效果。因為錯誤是發(fā)生在訂閱范圍（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 為什么不起作用，記住，當(dāng)我們訂閱第一個 observable 的時候，訂閱會調(diào)起三個可選的參數(shù)。

      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：數(shù)據(jù)流被成功捕獲調(diào)用
error：發(fā)送一個 Javascript 錯誤或者異常
complete當(dāng)數(shù)據(jù)流完成時候調(diào)用

所以，錯誤是發(fā)生在訂閱函數(shù)的區(qū)域，所以我們怎么出了呢？

使用 Rxjs 的操作符

Rxjs 提供了一些操作符幫助我們處理這些錯誤，每個都可以使用在這些場景中，我們來了解下。

我們將接觸 catchError，throwError 和 EMPTY。

catchError

catchError 抓取錯誤，但是會發(fā)出值。簡而言之，它在錯誤的基礎(chǔ)上返回另一個 observable。

我移除上面提到的三個回調(diào)函數(shù)的策略，然后配合管道來使用 catchError 操作符。

更多相關(guān) pipe

this.beerService
      .getBeers()
      .pipe(catchError(() => of([{ name: 'my default beer' }])))
      .subscribe((beers) => {
        console.log(beers);
        this.beers = beers;
        this.title = beers[0].name;
      });

如果我們的代碼中錯誤時候需要調(diào)用其他內(nèi)容，catchError 非常適合發(fā)出默認值，并且訂閱可以將默認值拋出去。

throwError

有時候，我們不想拋出錯誤，但是想要提示錯誤信息。針對這個場景，throwError 很適合我們。

throwError 不會觸發(fā)數(shù)據(jù)到 next 函數(shù)，這使用訂閱者回調(diào)的錯誤。我們我們想捕獲自定義的錯誤或者后端提示的錯誤，我們可以使用訂閱者中的 error 回調(diào)函數(shù)。

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

更多相關(guān) throwError

EMPTY

有時候，我們不想在組件中傳播錯誤。Rxjs 提供了 EMPTY 常量并返回一個空的 Observable，并未拋出任何的數(shù)據(jù)到訂閱著回調(diào)中。

this.beerService
      .getBeers()
      .pipe(
        catchError(() => {
          return EMPTY;
        })
      )
      .subscribe({
        next: (beers) => {
          this.beers = beers;
          this.title = beers[0].name;
        },
        error: (err) => console.log(err),
      });