Angular Http拦截器阻止http进度事件答案

【问题标题】：Angular Http Interceptor blocking http progress eventsAngular Http拦截器阻止http进度事件
【发布时间】：2020-06-21 07:23:03
【问题描述】：

我已经尝试了很多方法。这种方法在书上非常有用，但是，我的 HTTP 拦截器没有将 reportProgress 事件转发到我的组件。我可以在拦截器上看到事件，但无论我尝试什么，它们都不在组件中（例如{observe: 'events'} 等）。我不知道如何获得组件的进度。

interceptor.ts

import {Component, Input, OnInit} from '@angular/core';
import {
  HttpClient,
  HttpRequest,
} from '@angular/common/http';
import {tap} from 'rxjs/operators';
import {AlertService} from '../../services/alert.service';

@Component({
  selector: 'app-upload',
  templateUrl: './upload.component.html',
  styleUrls: ['./upload.component.scss']
})

export class UploadComponent implements OnInit {

  constructor(private http: HttpClient, public alertService: AlertService) {
  }

  ngOnInit(): void {
  }

  files: File[] = [];

  upload(files: File[]) {
    this.files = files;
    for (let file of files) {
      const formData: FormData = new FormData();
      formData.append('file', file, file.name);

      const url = 'http://localhost:4000/upload';

      const req = new HttpRequest('POST', url, formData, {
        reportProgress: true
      });

      this.http.request(req)
        .pipe(
          tap(console.log) // ONLY THE FINAL RESPONSE HERE
        )
        .subscribe();

    }
  }
}

组件.ts

import {Injectable} from '@angular/core';
import {
  HttpResponse,
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import {Observable} from 'rxjs';
import {StateService} from '../services/state.service';

@Injectable()
export class LoaderInterceptor implements HttpInterceptor {
  private requests: HttpRequest<any>[] = [];

  constructor(private alertService: AlertService, private stateService: StateService) {
  }

  removeRequest(req: HttpRequest<any>) {
    const i = this.requests.indexOf(req);
    if (i >= 0) {
      this.requests.splice(i, 1);
    }
    this.stateService.isLoading$.next(this.requests.length > 0);
  }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    this.requests.push(req);
    this.stateService.isLoading$.next(true);
    return new Observable(observer => {
      const subscription = next.handle(req)
        .subscribe(
          event => {
              console.log(event); // I CAN SEE THE LOADED EVENT HERE
            if (event instanceof HttpResponse) {
              this.removeRequest(req);
              observer.next(event);
            }
          },
          err => {
            this.alertService.setAlert('error', err.message);
            this.removeRequest(req);
            observer.error(err);
          },
          () => {
            this.removeRequest(req);
            observer.complete();
          });
      // remove request from queue when cancelled
      return () => {
        this.removeRequest(req);
        subscription.unsubscribe();
      };
    });
  }
}

【问题讨论】：

标签： angular typescript httprequest angular-http-interceptors

【解决方案1】：

您只是从拦截器发出响应事件。

if (event instanceof HttpResponse) {
  this.removeRequest(req);
  observer.next(event);
}

您应该将 observer.next 移出 if 块：

const subscription = next.handle(req)
  .subscribe(event => {
    console.log(event); // I CAN SEE THE LOADED EVENT HERE
    if (event instanceof HttpResponse) {
      this.removeRequest(req);      
    }
    // MOVED HERE
    observer.next(event);
  }, err => {
    this.alertService.setAlert('error', err.message);
    this.removeRequest(req);
    observer.error(err);
  }, () => {
    this.removeRequest(req);
    observer.complete();
  });

我会亲自在管道中执行此操作，而不是创建新订阅，但这与解决方案无关。

【讨论】：