Выполнять операции в Observable в Observable

Question

Я пытаюсь выполнить операции в .subscribe (), которая находится внутри другого .subscribe (): сбор файлов, чтобы все они могли быть заархивированы после этого.

Я использую JSZip для обработки 'zipping'часть кода.

Я уже пытался использовать .map () вместо итерации цикла for.Я прочитал здесь ( Это хороший способ вызвать подписку внутри подписки? ), чтобы я мог решить эту проблему с помощью .flatMap (), потому что моя вторая наблюдаемая (загрузка файлов) зависит от результатов первой (получить список файлов), но я до сих пор не могу понять ...

У меня есть работающая реализация, но она использует setTimeout (), поэтому она "ждет", пока файлыскачал, чтобы потом можно было их заархивировать, но я считаю, что это не лучший подход.

    this.downloadingZipFile = true;
    let zip = new JSZip();
    let tableTemplateCollection = '';
    let givenName = this.patientGivenName;

    let templateIndex = zipTemplate.templateIndex; 

    console.log('TOTAL FILES COUNT: ' + this.totalFiles);
    this.fileViewerDataService.getFileNamesList(this.patient.getPatientQueryParams(), this.totalFiles, 0)
      .subscribe((data) => {
        let dataLength = Object.keys(data).length;
        for (let i = 0; i < dataLength; i++) {
          console.log('THIS IS THE ID: ' + data[i]['indexId']);
          this.fileViewerDataService.getFileViewByIdAsBlob(data[i]['indexId']).subscribe(patientFile => {
            console.log(`Saving... ${data[i]['indexId']}`);
            if ((data[i]['name']).includes('immunization')) {
              console.log('THIS IS THE PATIENT FILE: ' + patientFile);
              zip.folder('immunization').file(`${data[i]['name']}.html`, patientFile);
              tableTemplateCollection += this.indexCreation(data[i]['name']);
            } else if ((data[i]['name']).includes('laboratory')) {
              console.log('THIS IS THE PATIENT FILE: ' + patientFile);
              zip.folder('laboratory').file(`${data[i]['name']}.html`, patientFile);
              tableTemplateCollection += this.indexCreation(data[i]['name']);
            } else {
              console.log('THIS IS THE PATIENT FILE: ' + patientFile);
              zip.folder('medication').file(`${data[i]['name']}.html`, patientFile);
              tableTemplateCollection += this.indexCreation(data[i]['name']);
            }
            this.downloadingZipFile = false;
          });
        }
        setTimeout(function () {
          templateIndex = templateIndex.replace('##NAME##', givenName);
          tableTemplateCollection = templateIndex.replace('##FILES##', tableTemplateCollection);
          zip.file('index.html', tableTemplateCollection);
          zip.file('data.js', translateEnFr.data);
          zip.generateAsync({ type: "blob" }).then(function (patientFolders) {
            saveAs(patientFolders, "Report.zip");
          });
        }, 2500);
      },
        err => {
          window.alert(`${err.status}: Error downloading zip from API.`);
        })
  }

Answer 1

Вы, конечно, правы, что setTimeout() не лучший подход. Вы могли бы использовать обещания как это:

this.fileViewerDataService.getFileNamesList(this.patient.getPatientQueryParams(), this.totalFiles, 0)
  .subscribe((data) => {
    let dataLength = Object.keys(data).length;
    let promises = [];
    for (let i = 0; i < dataLength; i++) {
      console.log('THIS IS THE ID: ' + data[i]['indexId']);
      promises.push(createPromise(data[i]));
    }
    Promise.all(promises).then(() => {
      templateIndex = templateIndex.replace('##NAME##', givenName);
      tableTemplateCollection = templateIndex.replace('##FILES##', tableTemplateCollection);
      zip.file('index.html', tableTemplateCollection);
      zip.file('data.js', translateEnFr.data);
      zip.generateAsync({ type: "blob" }).then((patientFolders) => saveAs(patientFolders, "Report.zip"));
    }).catch(err => {
      window.alert(`${ err.status }: Error downloading zip from API.`);
    });
  },
    err => {
      window.alert(`${ err.status }: Error downloading zip from API.`);
    });

createPromise() будет выглядеть так:

createPromise(data) {
  return new Promise((resolve, reject) => {
    this.fileViewerDataService.getFileViewByIdAsBlob(data['indexId']).subscribe(patientFile => {
      console.log(`Saving... ${ data['indexId'] }`);
      if ((data['name']).includes('immunization')) {
        console.log('THIS IS THE PATIENT FILE: ' + patientFile);
        zip.folder('immunization').file(`${ data['name'] }.html`, patientFile);
        tableTemplateCollection += this.indexCreation(data['name']);
      } else if ((data['name']).includes('laboratory')) {
        console.log('THIS IS THE PATIENT FILE: ' + patientFile);
        zip.folder('laboratory').file(`${ data['name'] }.html`, patientFile);
        tableTemplateCollection += this.indexCreation(data['name']);
      } else {
        console.log('THIS IS THE PATIENT FILE: ' + patientFile);
        zip.folder('medication').file(`${ data['name'] }.html`, patientFile);
        tableTemplateCollection += this.indexCreation(data['name']);
      }
      this.downloadingZipFile = false;
      resolve();
    }, error => reject(error));
  });
}