RxJs catchError 更改返回類型

Question

我正在嘗試實現一些緩存，並且我有以下方法。 catchError塊導致錯誤，因為返回類型變為Observable<Client | Client[]> Observable<Client | Client[]> 。 我不明白為什么它認為它不是一組客戶端，或者如何修復。

#clients: Client[] = []
#clientsLastModified: string | null = null


index(): Observable<Client[]> {
    let headers = new HttpHeaders()
    if (this.#clientsLastModified)
        headers = headers.set('If-Modified-Since', this.#clientsLastModified)

    return this.http.get<IClientDTO[]>('clients', {headers, observe: 'response'}).pipe(
        map(x => {
            this.#clientsLastModified = x.headers.get('Last-Modified')

            if (x.status === HttpStatusCode.Ok && x.body) {
                this.#clients = x.body.map(x => new Client(x))
                return this.#clients
            } else
                return of([])
        }),
        catchError((err: unknown) => {
            if (err instanceof HttpErrorResponse && err.status === HttpStatusCode.NotModified)
                return this.#clients

            return throwError(() => err)
        })
    )
}

Answer 1

為了糾正這個問題，需要做兩個小改動：

1. 不要在 map 內部使用of 您希望 map 的結果返回類型Client[] ； of使其返回Observable<Client[]>

2. of內部catchError 。 在catchError中，你應該返回 observable，所以of是必需的。 沒有顯示錯誤的原因是因為類型是 Array，並且 Array 也是有效的ObservableInput ，但會有不同的行為。 RxJS 會將 Array 轉換為單獨發出每個項目的 observable（因此類型最終是Observable<Client>而不是Observable<Client[]> ）。

return this.http.get<IClientDTO[]>('clients', {headers, observe: 'response'}).pipe(
  map(x => {
    this.#clientsLastModified = x.headers.get('Last-Modified')

    if (x.status === HttpStatusCode.Ok && x.body) {
      this.#clients = x.body.map(x => new Client(x))
        return this.#clients
      } else
        return [] // <-- don't use of
  }),
  catchError((err: unknown) => {
    if (err instanceof HttpErrorResponse && err.status === HttpStatusCode.NotModified)
      return of(this.#clients) // <-- use of

      return throwError(() => err)
  })
)