我在角度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发出请求,这些请求发生了两次.我尝试删除subscribe,所以它只执行do功能,而我的微调框永不停止.
有人对我应该做什么有任何建议吗?我认为我没有正确使用rxjs,但不确定是什么解决方法.
解决方案您两次呼叫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和摇晃树的功能
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拦截
发布评论