Angular 5 拦截 - 请求重复 [英] Angular 5 intercept - requests are duplicated

问题描述

我在 Angular 5 中使用了带有 HttpInterceptor 的拦截器，但我在使用 rxjs 时遇到了问题，我的所有 http 请求都重复了.

import { Router } from '@angular/router';import { Injectable, ApplicationRef } from '@angular/core';从@angular/common/http"导入 { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse };从 'rxjs/Rx' 导入 { Observable };导入 'rxjs/add/observable/throw';导入 'rxjs/add/operator/catch';导入 'rxjs/add/observable/empty';从'ngx-spinner'导入{ NgxSpinnerService}；从'../../service/error-handling.service'导入{ErrorHandlingService}；@Injectable()导出类 ApiRequestInterceptor 实现 HttpInterceptor {私人计数:数字 = 0；构造函数(私有只读微调器:NgxSpinnerService，私有只读路由器:路由器，私有只读 errorHandling: E​​rrorHandlingService,私有只读 applicationRef: ApplicationRef) { }拦截(req: HttpRequest
如您所见，我的应用程序使用具有不同组件和服务的 httpclient 发出请求，并且这些请求发生了两次.我尝试删除订阅，因此它只执行 do 功能，但我的微调器永远不会停止.
有人对我应该做什么有什么建议吗?我想我没有正确使用 rxjs 但不确定修复是什么.
解决方案
您正在调用 next.handle() 两次.只返回第一个，不调用subscribe:
intercept(req: HttpRequest,next: HttpHandler): Observable>{this.count++;如果 (this.count === 1) {this.spinner.show();}返回 next.handle(req).catch((错误:任何)=> {this.count--;返回 Observable.throw(err);}).do(事件=>{如果(HttpResponse 的事件实例){this.count--;if (this.count === 0) setTimeout(this.spinner.hide());}});}
小建议，升级到angular6以利用新的rxjs和treeshaking
I am using an interceptor with HttpInterceptor in angular 5 and I have a problem with rxjs where all my http requests are duplicated.
import { Router } from '@angular/router';
import { Injectable, ApplicationRef } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/empty';
import { NgxSpinnerService } from 'ngx-spinner';
import { ErrorHandlingService } from '../../service/error-handling.service';

@Injectable()
export class ApiRequestInterceptor implements HttpInterceptor {

  private count: number = 0;

  constructor(
    private readonly spinner: NgxSpinnerService,
    private readonly router: Router,
    private readonly errorHandling: ErrorHandlingService,
    private readonly applicationRef: ApplicationRef) { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.count++;

    if (this.count === 1) {
      this.spinner.show();
    }

    return next.handle(req)
      .catch((err: any) => {
        this.count--;
        return Observable.throw(err);
      }).do(event => {
        if (event instanceof HttpResponse) {
          this.count--;
          if (this.count === 0) this.spinner.hide();
        }
      });
  }
}


As you can see, my app is making requests with httpclient with different components and services and those requests happen twice. I tried removing subscribe so it only does the do function but my spinner never stops.

Does anyone have any advice for what I should do? I think I am not using rxjs correctly but not sure what the fix is.
解决方案
You are calling next.handle() twice. Just return the first one, without calling subscribe:
intercept(req: HttpRequest<any>,next: HttpHandler): Observable<HttpEvent<any>> {
    this.count++;

    if (this.count === 1) {
      this.spinner.show();
    }

    return next.handle(req)
      .catch((err: any) => {
        this.count--;
        return Observable.throw(err);
      }).do(event => {
        if (event instanceof HttpResponse) {
          this.count--;
          if (this.count === 0) setTimeout(this.spinner.hide());
        }
    });
}
Small point of advice, upgrade to angular6 to take advantage of the new rxjs and tree shaking

                        
这篇关于Angular 5 拦截 - 请求重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！