如何将异步服务用于 Angular httpClient 拦截器 [英] How use async service into angular httpClient interceptor

问题描述

使用Angular 4.3.1和HttpClient，我需要将异步服务的请求和响应修改成httpClient的HttpInterceptor，

修改请求的例子:

导出类 UseAsyncServiceInterceptor 实现 HttpInterceptor {构造函数(私有异步服务:异步服务){}拦截(req: HttpRequest, next: HttpHandler): Observable>{//应用逻辑的输入请求，输出是请求的异步细化this.asyncService.applyLogic(req).subscribe((modifiedReq) => {const newReq = req.clone(modifiedReq);返回 next.handle(newReq);});/* 这里，我必须用 next.handle 返回 Observable 但很明显** 我有问题，因为我必须返回** newReq 和这里不可用.*/}}

响应的不同问题，但我需要再次应用逻辑以更新响应.在这种情况下，角度指南建议如下:

return next.handle(req).do(event => {如果(HttpResponse 的事件实例){//你的异步细化}}

但是do() 操作符——它在不影响流的值的情况下为 Observable 添加了副作用".

<块引用>

解决方案: 关于请求的解决方案由bsorrentino显示(进入接受的答案)，关于响应的解决方案如下:

return next.handle(newReq).mergeMap((value: any) => {返回新的 Observable((观察者) => {如果(HttpResponse 的值实例){//执行异步逻辑this.asyncService.applyLogic(req).subscribe((modifiedRes) => {const newRes = req.clone(modifiedRes);观察者.next(newRes);});}});});

因此，如何将带有异步服务的请求和响应修改为httpClient拦截器?

<块引用>

解决方案:利用 rxjs

解决方案

我认为 反应流 存在问题.intercept 方法期望返回一个 Observable 并且您必须使用 Observable 返回的 Observable 将异步结果展平strong>next.handle

试试这个

intercept(req: HttpRequest, next: HttpHandler): Observable>{返回 this.asyncService.applyLogic(req).mergeMap((modifiedReq)=>{const newReq = req.clone(modifiedReq);返回 next.handle(newReq);});}

<块引用>

您也可以使用 switchMap 而不是 mergeMap

Using Angular 4.3.1 and HttpClient, I need to modify the request and response by async service into the HttpInterceptor of httpClient,

Example for modifying the request:

export class UseAsyncServiceInterceptor implements HttpInterceptor {

  constructor( private asyncService: AsyncService) { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // input request of applyLogic, output is async elaboration on request
    this.asyncService.applyLogic(req).subscribe((modifiedReq) => {
        const newReq = req.clone(modifiedReq);
        return next.handle(newReq);
    });
    /* HERE, I have to return the Observable with next.handle but obviously 
    ** I have a problem because I have to return 
    ** newReq and here is not available. */
  }
}

Different problem for the response, but I need again to applyLogic in order to update the response. In this case, the angular guide suggests something like this:

return next.handle(req).do(event => {
    if (event instanceof HttpResponse) {
        // your async elaboration
    }
}

But the "do() operator—it adds a side effect to an Observable without affecting the values of the stream".

Solution: the solution about request is shown by bsorrentino (into accepted answer), the solution about response is the follow:

return next.handle(newReq).mergeMap((value: any) => {
  return new Observable((observer) => {
    if (value instanceof HttpResponse) {
      // do async logic
      this.asyncService.applyLogic(req).subscribe((modifiedRes) => {
        const newRes = req.clone(modifiedRes);
        observer.next(newRes);
      });
    }
  });
 });

Therefore, how modify request and response with async service into the httpClient interceptor?

Solution: taking advantage of rxjs

解决方案

I think that there is a issue about the reactive flow. The method intercept expects to return an Observable and you have to flatten your async result with the Observable returned by next.handle

Try this

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
      return this.asyncService.applyLogic(req).mergeMap((modifiedReq)=> {
        const newReq = req.clone(modifiedReq);
        return next.handle(newReq);
    });
}

You could also use switchMap instead of mergeMap

这篇关于如何将异步服务用于 Angular httpClient 拦截器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！