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

Question

У меня есть этот код для визуализации выбранного файла для загрузки:

  //1
  <input type="file" multiple id="my_html_uploader" />


//2
var files = myHtmlUploaderElem.files;
if (files.length > 0) {
  for (var i = 0, file1; file1 = files[i]; i++) {
    var reader = new FileReader();
    reader.onload = (function(file2, i2) {
      return function(e) {
        alert("done!");
      };
    })(file1, i);

    reader.readAsDataURL(f);
  }
}

Как я могу поймать момент, когда обратный вызов reader.onload (...) былзакончено для

а) отдельный файл

б) весь выбранный файл

?

Answer 1

Создайте обещания, затем вы можете использовать Promise.all, чтобы ожидать их всех:

const promises = []; // keep as much constant as possible

for (const file of files) { // way more beautiful, no need for an IIFE with "const" or "let"
  let reader = new FileReader();

  promises.push(new Promise((resolve, reject) => { // short for: function(resolve, reject) {
    reader.onload = event => resolve(event.target.result);
    reader.onerror = reject;
  }));

  reader.readAsDataURL(file);
}

Promise.all(promises).then(results => {
  alert("all loaded");
  // results is an array of file contents
}).catch(error => {
  // one of the files failed to load, handle that here
});