HttpClientでキャッシュ可能なHttpResponseをObservableとして変換する

Question

Interceptorsを使用して、キャッシュされたデータを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）;は正しく返されていないようです。

アイデア？私は手動でオブジェクトを構築するときので、その点を証明するために、それは明らかに何らかの理由で起きていないオブジェクトへのHttpResponseタイプからキャストして、問題を考え出し

更新＃1

単純なオブジェクトを使用して、それは動作するようになりました。しかし、明らかに、手動鋳造は汚いものであり、なぜ鋳造が機能していないのかを理解する必要があります。

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