Angular: FileReader - программа чтения выполняется слишком много раз

Question

У меня есть этот FileReader, с помощью которого я могу читать папки:

private fileCache: any[];
  private folderReader$: Subject<any[]> = new Subject();

  public readFolder(files: any[]) {
    this.fileCache = [];
    this.readFile(0, files);
    return this.folderReader$.asObservable();
  }

  private readFile(index, files) {
    const reader = new FileReader();
    if (index >= files.length) {
      this.folderReader$.next(this.fileCache);
      return;
    }
    const file = files[index];
    const filename = file.name;
    reader.onload = (e: any) => {
      this.fileCache.push({
        name: filename,
        content: e.target.result});
      this.readFile(index+ 1, files);
    };

    reader.readAsText(file);
  }
}

Теперь странно то, что всякий раз, когда я выбираю второй вход, он запускается несколько раз. Если я выберу только один вход, все будет в порядке ...

Если, например, использовать это:

this.folderReader.readFolder(data.target.files).subscribe(files => {
    console.log(test);
}

после двух входов, консоль трижды отобразит тест:

test
test
test

Как я видел здесь: Средство чтения файлов выполняется несколько раз в javascript Вероятно, проблема заключается в том, что onload запускается несколько раз, поэтому я попытался удалить эту строку:

  this.readFile(index+ 1, files);

, чтобы вся функция не запускалась заново ... Однако после этого она вообще не работала, так как, вероятно, ей нужен index+1, поэтому она может проходить через все файлы, которые я считаю.

Что я здесь не так делаю? Почему FileReader выполняется сам по себе несколько раз, а не один раз для каждого ввода?

Answer 1

Это способ, которым вы обрабатываете тему.

Один из обходных путей - это повторная инициализация вашего субъекта в вызове readFolder, например:

  public readFolder(files: any[]) {
    this.folderReader$ = new Subject();
    this.fileCache = [];
    this.readFile(0, files);
    return this.folderReader$.asObservable();
  }

Но лучший способ - использовать другой субъект, такой какBehaviorSubject из rxjs.

Посмотрите на Понимание rxjs BehaviorSubject, ReplaySubject и AsyncSubject