Тип перехватчика «Observable<HttpResponse>» не может быть назначен типу «Observable<HttpEvent<any>>»

У меня возникли проблемы с обработкой ответа на кешированный запрос.

Чтобы повысить производительность моего приложения, я исследовал, что использование TransferStateInterceptor было лучшим решением. Но, к сожалению, у меня есть небольшая проблема с возвратом кэшированного ответа.

в моем исследовании этот ответ казался решением /questions/19463822/kak-ispolzovat-http-transfer-state-pri-ispolzovanii-otnositelnyih-url/19463830#19463830

Я также хотел реализовать решение в этом видео , но у меня всегда возникает одна и та же проблема при возврате кэшированного ответа.

Проблема, похоже, в типе, с которым возвращается ответ, но я не нашел никакой полезной информации о том, как решить эту проблему.

Ошибка именно в этой строке

      return of(new HttpResponse<any>({ body: cachedResponse })); // here is the type fail

сообщение об ошибке такое:

      Type 'Observable<HttpResponse>' is not assignable to type 'Observable<HttpEvent<any>>'.
  Type 'HttpResponse' is not assignable to type 'HttpEvent<any>'.
    Type 'HttpResponse' is missing the following properties from type 'HttpResponse<any>': type, clone, status, statusText, and 2 more.

в обоих решениях, которые я пытаюсь реализовать, именно тогда, когда мне нужно вернуть HttpResponse, он терпит неудачу.

Это пример моего кода в перехватчике.

      import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor} from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { TransferStateService } from '../internal/transfer-state.service';
import { HttpResponse } from 'aws-sdk';
import { tap } from 'rxjs/operators';

@Injectable()
export class TransferStateInterceptor implements HttpInterceptor {

  constructor(private transferStateService: TransferStateService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (req.method !== 'GET') {
      return next.handle(req);
    }

    const cachedResponse = this.transferStateService.getCache(req.url);
    if (cachedResponse) {
       return of(new HttpResponse<any>({ body: cachedResponse })); // here is the type fail
    }

    return next.handle(req).pipe(
      tap(event => {
        if (event instanceof HttpResponse) {
          this.transferStateService.setCache(req.url, event.body);
        }
      })
    );
   }
 }

и это мой TransferStateService

      import { isPlatformBrowser } from '@angular/common';
import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
import { makeStateKey, TransferState } from '@angular/platform-browser';
const transferStateCache: String[] = [];
@Injectable({
  providedIn: 'root'
})
export class TransferStateService {

  constructor(private transferState: TransferState, @Inject(PLATFORM_ID) private platformId) {}

  setCache(key: string, data: any) {
    if (!isPlatformBrowser(this.platformId)) {
      transferStateCache[key] = makeStateKey<any>(key);
      this.transferState.set(transferStateCache[key], data);
    }
  }


  getCache(key: string): any {
    if (isPlatformBrowser(this.platformId)) {
      const cachedData: any = this.transferState['store'][key];
      delete this.transferState['store'][key];
      return cachedData;
    }
  }
}

как я могу исправить эту проблему в перехватчике, чтобы я мог получить сохраненный ответ?

Источник

1 ответ

В твоей TransferStateInterceptor,

      import { HttpResponse } from 'aws-sdk';

Хотя я считаю, что вам нужно импортировать HttpResponseиз '@angular/common/http'.

Типы союзов для HttpEvent

      import { ..., HttpResponse } from '@angular/common/http';
Источник
Другие вопросы по тегам