在我的 Angular 8 应用程序中,我有一个基本的缓存拦截器:
export class CacheInterceptor implements HttpInterceptor {
constructor(private cache: CacheService) {}
public intercept(
req: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
if (req.method !== 'GET') {
return next.handle(req);
}
const cachedResponse = this.cache.get(req);
if (cachedResponse) {
console.log(cachedResponse);
return of(cachedResponse);
}
return next.handle(req).pipe(
filter(event => event instanceof HttpResponse),
map((response: HttpResponse<any>) => {
this.cache.addToCache(req, response);
return response;
})
);
}
}
我还有一个从外部 API 检索数据的服务:
public getCases(options: ModuleArguments): Observable<CaseResponse> {
return this.http
.get<CaseResponse>(this.URL_BASE, {
params: options as HttpParams
})
.pipe(map(this.cleanData, this));
}
“cleanData”方法只是循环接收到的数据并修改一些值以使它们更加人性化(例如将“support_request”变为“Support Request”)。
似乎正在发生的情况是,在服务中“清理”数据后,CacheInterceptor 将响应添加到缓存中。因此,当再次发出相同的请求并从缓存接收到相同的请求时,服务将尝试清除已清除的数据。
如何确保 HTTP 响应在被服务修改之前已被拦截并添加到缓存中?
最佳答案
如何通过将 pipe(map(this.cleanData, this))
操作移动到 Observable 完成并返回 CaseResponse
的位置来解决此问题。可能,这意味着 HttpInterceptor
已首先应用。
即在调用 getCases 的地方,您可以尝试如下操作:
service.getCases(options).subscribe(resolvedData => {
// assuming cleanData(data: CaseResponse) signature
const cleanedData = this.cleanData(resolvedData);
// .. do something with cleanedData
});
此外,从设计 Angular 来看,您不会希望 getCases
做的事情超出其应有的范围 - 它是一种服务方法,执行 HTTP 请求并以它们所指定的格式返回案例发送给您。理想情况下,数据的重新格式化可以在该服务功能的消费者处完成 - 因为消费者很可能需要数据清理/ reshape 。
关于javascript - 如何确保可观察对象上的运算符发生在 HTTP 拦截器之后?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59074399/