Angular HTTP ReportProgress где-то застрял и подписаться не получится - PullRequest
Новая
       41

Angular HTTP ReportProgress где-то застрял и подписаться не получится

0 голосов
/ 18 декабря 2018

Сервис для запросов: 

import {Injectable} from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {Observable} from "rxjs/Rx";

@Injectable({
    providedIn: 'root'
})
export class HttpService {
    constructor(public http: HttpClient) {
    }

    uploadFile(formData: FormData): Observable<any> {
        return this.http.post('/upload', formData, {
            reportProgress: true
        });
    }
}

Перехватчик HTTP: 

import {Injectable} from "@angular/core";
import {HttpEvent, HttpHandler, HttpInterceptor, HttpParams, HttpRequest, HttpResponse} from "@angular/common/http";
import {Observable} from "rxjs";
import {tap} from "rxjs/operators";

@Injectable()
export class ConverterInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        if(req.body !== null && !(req.body instanceof HttpParams) && !(req.body instanceof FormData)) {
            req = req.clone({
                body: decodeURI(req.body)
            });
        }

        return next.handle(req).pipe(tap((event: HttpEvent<any>) => {
            console.log('Test', event);
            if (event instanceof HttpResponse) {
                event = event.clone({body: encodeURI(event.body)});
            }
            return event;
        }));
    }
}

Как я его использую: 

async uploadFile(files: FileList) {
    const formData: FormData = new FormData();
    for (let x = 0; x < files.length; x++) {
        const file = files.item(x);
        formData.append(x.toString(), file, file.name);
    }

    this.httpService.uploadFile(formData).subscribe(a => {
        console.log('A', a);
    }, b => {
        console.log('B', b);
    }, () => {
        console.log('C');
    });
}

Проблема :когда я загружаю файл с моей функцией, я получаю только один A ответ с сообщением.Но нет события, содержащего ход загрузки.

Но в перехватчике я вижу, что есть событие загрузки.Потому что я могу видеть сообщение Test с событием несколько раз.(пока загрузка не будет завершена)

Что я делаю не так?

Заранее спасибо за некоторые идеи.: -)

StackBlitz: https://stackblitz.com/edit/angular-ultbzm

Проблема в консоли после выбора файла.

enter image description here

Там вы видите, что у меня много Test событий, но только одно B событие, которое является HttpErrorResponse.

...