Question

FYI此问题与Angular Universal相关

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

我尝试按照Angular拦截器设置的指南https://github.com/angular/angular/blob/master/aio/content/guide/http.md，但我似乎无法使它工作，当我返回一个Observable而不是next.handle（）时订阅只是没有＆＃39;被触发。

这是一个说明它不起作用的掠夺者。 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));

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

1 个答案: