如何确保可观察到的运算符在HTTP拦截器之后发生?

罗伯·贝利

在我的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响应之前确保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 
});

同样,从设计角度来看,您将不希望getCases做的事比预期的要多-这是一种服务方法,它执行HTTP请求并以发送给您的格式返回案例。数据的重新格式化可以理想地在该服务功能的使用者处完成-因为很有可能需要清洗/重塑的使用者

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

角度10:我的请求在拦截器中的http请求中可观察到的订阅之后未发送

RXJS可观察到的删除管道运算符

如何使用扫描运算符计算可观察到的空隙的发射值?

未定义可观察到的异步运算符

如何从http请求返回可观察到的

Angular HTTP可观察到的元组

Rx运算符,每次可观察到的源发出新事件时,将“ n”个最新项作为列表发出

Angular 8订阅了拦截器中的可观察对象

如何测试使用Angular 6+调用可观察对象的拦截器?

如何枚举可观察到的同步?

如何处理可观察到的错误,但继续观察可观察到的东西?

RxSwift配置可在Zip运算符中观察到

如何使“独立”计算的可观察到的某些可观察到的(Knockout.js)

如何“绑定”(存储)可观察到的$ index到我的可观察到的?

可观察到可观察的顺序

万一拦截器发生错误,如何将控件从拦截器重定向到jsp

订阅可观察的Angular HTTP拦截器,然后返回next.handle但抛出TypeError:您提供了“未定义”

在Angular2中,如何拦截可观察到的错误响应并将其传递给错误通道

可观察到的异步

刷新可观察到

Angular 7如何在可观察到的地方获取HTTP错误的正文(json)

从rxjs和angular的可观察值中获取值后,如何处理拦截器上的请求?

可观察到的角度HTTP中传递标题

Angular 2缓存可观察到的http结果数据

HTTP可观察到的返回未定义/空

HTTP可观察到的响应解析为数组

http.get()不返回可观察到的

可观察到的角度解析器过早完成

如何使用RXJS运算符基于重复值对Firebase可观察列表进行排序