延續之前的章節,此章節,主要是說明如何將之前列表的函式,修改成由記憶體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,取回所屬的資料集合。也會將完整的程式碼,公佈。
這邊遇到一個問題
import { catchError } from 'rxjs/operators';
catchError如果沒有自動import的話,可以手動 import