我如何使用 catchError() 並仍然返回帶有 rxJs 6.0 的類型化 Observable？

Question

cdSo 我正在嘗試將我的一些 Angular 5 代碼遷移到 6，並且我了解 rxjs 使用 .pipe() 運算符工作所需的大部分更改。 它的工作方式與您對“可管道”操作的預期一樣。

但是， catchError()的行為不同於.catch()運算符。 在 rxjs 之前 6 我使用.catch()運算符將錯誤輸入轉換為一個一致的錯誤 object 然后可以在 .subscribe() 中捕獲。

getAlbums(): Observable<Album[]> {
     return this.httpClient.get<Album[]>(this.config.urls.url("albums"))
           .map(albumList => this.albumList = albumList)
           .catch(new ErrorInfo().parseObservableResponseError);            
    }

new ErrorInfo().parseObservableResponseError是一個 function，它將錯誤 object 作為輸入，並將輸入錯誤解析為更簡單的錯誤 object，並歸一化為 object。Catch 返回Observable<any> ：

parseObservableResponseError(response): Observable<any> {
    let err = new ErrorInfo();
    ...
    return Observable.throw(err);        
}

這對於輕松處理 rxjs5 上的錯誤非常有用——錯誤基本上作為管道的一部分被捕獲，然后拋出一個眾所周知的錯誤結構，可以捕獲.subscribe()錯誤 function。

然而，將相同的代碼移動到 rxjs 6 並使用.pipe()我正在嘗試執行以下操作：

getAlbums(): Observable<Album[]> {
    return this.httpClient.get<Album[]>(this.config.urls.url("albums"))
                .pipe(
                    map(albumList => this.albumList = albumList),
                    catchError(new ErrorInfo().parseObservableResponseError)                        
                );           
}

然而，這不起作用，因為 catchError 現在將Observable<any>的結果返回到管道中，這不是我想要的。 本質上，我只想像以前一樣重新拋出任何錯誤。

錯誤 TS2322：類型 'Observable<{} | Album[]>' 不可分配給類型 'Observable'

如何模擬舊的 operator .catch()行為？

更新：

在對此進行了更多研究之后，所示代碼剛剛開始工作，而沒有給我一個構建錯誤。 老實說，我不知道為什么它之前因錯誤消息而失敗，但現在可以正常工作了。 @cartant 在評論中的建議是一種明確的方式來指定結果並且也有效。

Answer 1

您應該能夠顯式指定catchError的類型參數，以指示它不會返回發出值的observable - 也就是說，它將返回Observable<never> - 並且將始終拋出：

getAlbums(): Observable<Album[]> {
    return this.httpClient.get<Album[]>(this.config.urls.url("albums"))
        .pipe(
            map(albumList => this.albumList = albumList),
            catchError<Album[], never>(new ErrorInfo().parseObservableResponseError)
        );           
}

這樣做會看到從pipe調用中推斷出的類型是Observable<Album[]> 。

Answer 2

您可以返回一個類型化的可觀察對象：

return of (new YourType({ }));

代替

return throwError(()=>err);

例如：

http.get<CustomType>().pipe(
  map(result=>{
    // do something here, such as accessing local storage, stopping a spinner...etc.
    return result;
  }),
  catchError(err => {
     return of (new CustomType({
 //initialization with a constructor
}));
    // or you can return throwError(err);
  })
)