在 HttpClient 中将缓存的 HttpResponse 转换为 Observable

Question

我正在使用拦截器来缓存并返回缓存的数据，作为 Angular 4.3 HttpClient 功能的一部分。 下面是拦截器调用的实用服务，用于存储和返回 HTTP 响应。

@Injectable()
export class LocalStorageCacheService implements HttpCache {
    get(req: HttpRequest<any>): HttpResponse<any> {
        return <HttpResponse<any>>JSON.parse(localStorage.getItem(btoa(req.url)))
    };
    put(req: HttpRequest<any>, resp: HttpResponse<any>): void {
        localStorage.setItem(btoa(req.url), JSON.stringify(resp));
    }
}

下面是我的拦截器，它检查缓存的条目并在可用时返回。

@Injectable()
export class CacheInterceptorService implements HttpInterceptor {
    constructor(private localStorageCacheService: LocalStorageCacheService) {
    }
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
      if (req.method !== 'GET') {
          return next.handle(req);
        }
        const cachedResponse = this.localStorageCacheService.get(req);
        if (cachedResponse) {
         **return Observable.of(cachedResponse);**
        }
        return next.handle(req).do(event => {
          if (event instanceof HttpResponse) {
            this.localStorageCacheService.put(req, event);
          }
        });
      }
}

我遇到的问题是，http 调用没有命中调用组件的订阅部分。即语句 return Observable.of(cachedResponse); 似乎没有正确返回。

有什么想法吗？

更新 #1

我发现了问题，显然是从 object 转换为 HttpResponse 类型由于某种原因没有发生，所以为了证明这一点，当我手动构造对象时使用普通对象，它开始工作。但显然，手动铸造是一件肮脏的事情，需要弄清楚为什么铸造不起作用。

if (cachedResponse) {

  let httpResponse = new HttpResponse({
    status : cachedResponse.status,
    body : cachedResponse.body,
    headers : cachedResponse.headers,
    statusText : cachedResponse.statusText,
    url : cachedResponse.url
  });

  return Observable.of(httpResponse)
};

Answer 1

试试这样：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return <HttpRequest<any>>req.catch((error) => {
        return <HttpHandler>next.catch((err) => {
            if (req.method !== 'GET') {
                return next.handle(req);
            }
            const cachedResponse = this.localStorageCacheService.get(req);
            if (cachedResponse) {
                return Observable.throw(cachedResponse);
            }
            return next.handle(req).do(event => {
                if (event instanceof HttpResponse) {
                    this.localStorageCacheService.put(req, event);
                }
            });
        })
    })
}