iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 24
0
自我挑戰組

Angular 學習雜記系列 第 24

Angular 學習雜記-Angular整合應用網站-員工資料管理系統(十三)

延續之前的章節,此章節,主要是說明如何將之前列表的函式,修改成由記憶體Web API(In-memory Web API)來取得資料,並且,如何處理Error的部份。

原來的程式碼:

  getEmployee(): Observable<Employeeinfo[]> {
    return of(employeelist);
  }

主要的修改是由原來是直接取得假資料的類別,改成透過http.get的方式來取得整個Employeeinfo的陣列資料。
不過,寫程式,總是會有出錯的情況,特別是從遠端伺服器獲取資料時,更是有很多不確定的因素。所以,可以使用RxJS的catchError()運算子來建立對Observable結果的處理管道(pipe)。而catchError()運算子會欄截失敗的Observable。將錯誤傳給錯誤處理器,來處理此錯誤。而handleError()的函式,就會報告這個錯誤,並且返回一個無害的回傳值。才能正確工作。程式碼如下:

  // 回傳員工資料
  getEmployee(): Observable<Employeeinfo[]> {
    // return of(employeelist);
    return this.http.get<Employeeinfo[]>(this.employeeUrl)
      .pipe(
        catchError(this.handleError<Employeeinfo[]>('getEmployee', []))
      );
  }

而handleError()的函式,就會報告這個錯誤,並且返回一個無害的回傳值。才能正確工作。程式碼如下:

  private handleError<T>(operation = 'opertion', result?: T) {
    return (error: any): Observable<T> => {
      console.error(error);
      return of(result as T);
    };
  }

下個章節,來說明如何依id,取回所屬的資料集合。也會將完整的程式碼,公佈。


上一篇
Angular 學習雜記-Angular整合應用網站-員工資料管理系統(十二)
下一篇
Angular 學習雜記-Angular整合應用網站-員工資料管理系統(十四)
系列文
Angular 學習雜記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
darta0809
iT邦新手 5 級 ‧ 2020-12-29 17:50:34

這邊遇到一個問題
import { catchError } from 'rxjs/operators';
catchError如果沒有自動import的話,可以手動 import

我要留言

立即登入留言