Angular Observables и рекурсивные запросы с индикатором выполнения занимают большую память браузера - PullRequest
Новая
       22

Angular Observables и рекурсивные запросы с индикатором выполнения занимают большую память браузера

0 голосов
/ 20 ноября 2018

Я пытался загрузить несколько файлов один за другим (один запрос за другим) через Observables и рекурсивные запросы, но он потребляет очень большую оперативную память и даже завершает свою работу, не освобождая память.

Мой пример кода (содержит только основной логический метод вместо полного компонента)

Интерфейс PersonInfo: 

interface PersonInfo {
    personId: number;
    name: string:
    email: string;
    resume: File;
    progress: number;
    isUpload: boolean;
}

Код компонента PersonInfo: 

uploadPersonInfo() {

    const uploadCollection: Array<PersonInfo> = [
        { personId: 1, name: "Ram", email: "ram@example.com", resume: fileCollection[0], progress: 0, isUpload: false },
        { personId: 2, name: "Kumar", email: "kumar@example.com", resume: fileCollection[1], progress: 0, isUpload: false },
        { personId: 3, name: "Prakash", email: "prakash@example.com", resume: fileCollection[2], progress: 0, isUpload: false }, 
    ];

    const httpUploadPersonInfo = (person: PersonInfo): Observable<HttpEvent<boolean>> => {
        const payload = new FormData();
        const httpOption = {
            headers: new HttpHeaders(),
            reportProgress: true
        };

        payload('id', person.personId);
        payload('name', person.name);
        payload('email', person.email);
        payload('resume', person.resume, person.resume.name);

        const req = new HttpRequest('POST', 'http://localhost:3000/Person/UploadPersonInfo', payLoad, httpOptions);

        return this.http.request<boolean>(req);
    }

    let index = 0;

   const upload = (): any => {

       if (index === uploadCollection.length) {
           return;
       }

       const person: PersonInfo = uploadCollection[index];

       httpUploadPersonInfo().subscribe((event: HttpEvent<boolean>) => {
           switch (event.type) {
               case HttpEventType.UploadProgress:
                   person.progress = Math.round((event.loaded / person.resume.size) * 100)
                   break;
               case HttpEventType.Response:
                   if(event && event.body == true) {
                       index += 1;
                       upload();
                   }
                   break;
           }
       });

   }

   upload();

}

В блоке инициализации: 

ngOnInit() {
    this.uploadPersonInfo();
}

Потребление ОЗУ:

enter image description here

Примечание : я изучил следующий вопрос, но онбыло полностью выполнено мое требование Angular 2 Http, Observables и рекурсивные запросы

Мне нужно загружать всю информацию о человеке последовательно, а не параллельно.Более того, мне также нужно следить за ходом загрузки файла.

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

...