import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';
@Injectable()
export class ApiService {
constructor(private http: HttpClient) { }
// get API request
public apiGetRequest(url: any): Observable<any> {
return this.http.get(url)
.pipe(
catchError(this.handleError('apiGetRequest'))
);
}
}
我正在使用 Angular 5 和 rxjs 版本 5.5.6 我试图缓存多个 http get 请求。
您可以创建内部核心价值配对存储解决方案来缓存请求。
我在这里使用Map()为了这。
import { Injectable } from '@angular/core';
import { HttpEvent, HttpRequest, HttpHandler, HttpInterceptor, HttpResponse } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { tap, shareReplay } from 'rxjs/operators';
@Injectable()
export class CacheInterceptor implements HttpInterceptor {
private cache = new Map<string, any>();
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
if (request.method !== 'GET') {
return next.handle(request);
}
const cachedResponse = this.cache.get(request.url);
if (cachedResponse) {
return of(cachedResponse);
}
return next.handle(request).pipe(
tap(event => {
if (event instanceof HttpResponse) {
this.cache.set(request.url, event);
}
})
);
}
}
现在您需要处理缓存失效问题。每当数据发生变化时,您都需要使其失效。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)