我使用Interceptor来缓存并返回缓存数据,作为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调用没有点击调用组件的订阅部分。即语句返回Observable.of(cachedResponse); 似乎没有正确返回。
有什么想法吗?
更新#1
我想出了问题,显然是从对象转换为 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)
};
答案 0 :(得分:0)
试试这样:
pre