我在角度5中使用了带有HttpInterceptor的拦截器,而rxjs遇到了一个问题,该问题中所有我的http请求都重复了。
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();
}
});
}
}
如您所见,我的应用程序正在使用具有不同组件和服务的httpclient发出请求,这些请求发生了两次。我尝试删除订阅,所以它只执行do功能,而我的微调框永不停止。
有人对我应该做什么有任何建议吗?我认为我没有正确使用rxjs,但不确定是什么解决方法。
答案 0 :(得分:4)
您两次致电next.handle()
。只需返回第一个,而无需调用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());
}
});
}
小建议,升级到angular6以利用新的rxjs和摇晃树
答案 1 :(得分:1)
请查看here,了解有关微调器和计数请求的解决方案。
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
this.count++;
if (this.count === 1) {
this.spinner.show();
}
return next.handle(request)
.pipe(
tap((event: HttpEvent<any>) => {
if (event instanceof HttpResponse) {
this.count--;
if (this.count === 0) setTimeout(this.spinner.hide());
}
}, (err: any) => {
this.count = 0;
setTimeout(this.spinner.hide());
})
);
}
答案 2 :(得分:0)
我有相同的重复请求问题。原来,我使用了角形,并且在按钮上有一个(click)事件,在表单元素上有一个(ngSubmit)事件。 通过删除其中一个来解决此问题,然后弹跳按钮永无伤害;)