返回自定义Observable时,Angular HTTP Client Interceptor无法正常工作

Question

仅供参考此问题与Angular Universal有关

我目前正在尝试创建一个缓存GET请求的HttpClient拦截器,并将缓存的响应作为可观察对象返回.

我试着遵循Angular拦截器设置的指南https://github.com/angular/angular/blob/master/aio/content/guide/http.md但我似乎无法让它工作,当我返回时除了next.handle()之外的Observable,订阅不会被触发.

这是一个说明它不起作用的plunker.https://plnkr.co/edit/QzVpuIoj3ZFXgHm7hVW2?p=preview

示例拦截器:

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  // if this is cached, return the cached response.
  return Observable.of({body: 'Test'});

  return next
    .handle(customReq)
    .do((ev: HttpEvent<any>) => {
      if (ev instanceof HttpResponse) {
        // Cache this response
      }
    });
 }

任何帮助将不胜感激.

我的目标最终是使用NG Universal的传输模块.如果我在拦截器中解决了这个问题,那么我应该让所有工作都准备好了.

编辑:我的假设是错误的.Angular HttpClient Interceptor Caching示例工作得非常好,它必须是Angular Universal,对我来说是失败的.(我使用Angular的工作示例更新了Plunker,以证明它适用于该情况).

这是我用于Angular Universal的拦截器.

constructor(private state: TransferState) {}

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (request.method !== "GET") {
        return next.handle(request);
    }

    const STATE_KEY = makeStateKey(request.urlWithParams);
    const cachedResponse = this.state.get(STATE_KEY, null);

    if (cachedResponse) {
        return Observable.of(cachedResponse);
    }

    return next.handle(request).do(event => {
        if (event instanceof HttpResponse) {
            this.state.set(STATE_KEY, event.clone());
        }
    });
}

也许这是TransferState服务的某种计时问题,我不确定.

Answer 1

我搞定了.这很有意义,但我无法相信我花了这么长时间才意识到这个小修复.当我返回obachedable的cachedResponse时,我需要创建一个新的HttpResponse对象,因为它不仅仅是一个接口.像这样:

return Observable.of(new HttpResponse<any>(cachedResponse));