javascript - 如何确保可观察对象上的运算符发生在 HTTP 拦截器之后？

Question

在我的 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 响应在被服务修改之前已被拦截并添加到缓存中？

Answer 1

如何通过将 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 。