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