使用JavaScript读取多文件并等待处理结果的技术问题

嘿，刚从C++/Python转过来学JavaScript的话，异步操作肯定会让你有点懵——毕竟之前写的大多是同步逻辑，JS的异步回调/Promise得转个弯适应下。我来帮你搞定这两个核心问题，给你个完全不用全局标志的优雅解决方案。

你遇到的两个问题本质是同一个：FileReader的读取操作是异步的，当你在changeCharsInFiles里直接返回new_file_list时，所有文件的读取和处理还没执行完，数组自然是空的。而多个异步操作的等待，用全局标志确实不优雅，我们用JavaScript原生的Promise就能完美解决。

1. 把单个文件的处理封装成Promise #

先把每个文件的读取、字符替换逻辑包成一个返回Promise的函数，这样每个文件的处理结果都能被异步追踪：

function processSingleFile(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => {
      let txt = reader.result;
      // 优化替换逻辑：用正则全局替换，比多次replace更高效
      let new_txt = txt.replace(/a/g, "A")
                       .replace(/b/g, "B")
                       .replace(/c/g, "C")
                       .replace(/d/g, "D");
      // 手动给Blob加name属性（原生Blob没有这个属性），保留原文件名
      const new_file = new Blob([new_txt], {type: "text/plain"});
      new_file.name = file.name;
      resolve(new_file);
    };
    reader.onerror = () => reject(reader.error);
    reader.readAsText(file);
  });
}

2. 修改changeCharsInFiles为异步函数 #

现在让这个函数返回一个Promise，它会在所有文件处理完成后，返回处理好的文件数组：

function changeCharsInFiles(file_list) {
  // 把类数组的FileList转成真正的数组，方便遍历
  const fileArray = Array.from(file_list);
  // 用Promise.all等待所有文件处理完成
  return Promise.all(fileArray.map(file => processSingleFile(file)));
}

3. 用异步链式调用（或async/await）处理事件逻辑 #

因为changeCharsInFiles现在返回Promise，我们可以用.then()拿到处理后的文件列表，再传给压缩函数。如果你熟悉Python的async/await，用JS的同款语法会更像同步代码，可读性更高：

$("#the-file-field").change(async function() {
  console.log("files have been chosen");
  const file_list = this.files;
  try {
    // 等待所有文件处理完成
    const processedFiles = await changeCharsInFiles(file_list);
    // 处理完再压缩下载
    zipMyFilesAndSave(processedFiles);
  } catch (err) {
    console.error("处理出错：", err);
    alert("处理文件时发生错误，请查看控制台信息");
  }
});

if (window.File && window.FileReader && window.FileList && window.Blob) {
  // 单个文件处理函数，返回Promise
  function processSingleFile(file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = () => {
        let txt = reader.result;
        // 正则全局替换，高效完成字符替换
        let new_txt = txt.replace(/a/g, "A")
                         .replace(/b/g, "B")
                         .replace(/c/g, "C")
                         .replace(/d/g, "D");
        const new_file = new Blob([new_txt], {type: "text/plain"});
        // 保留原文件名，压缩后方便识别
        new_file.name = file.name;
        resolve(new_file);
      };
      reader.onerror = () => reject(reader.error);
      reader.readAsText(file);
    });
  }

  function changeCharsInFiles(file_list) {
    const fileArray = Array.from(file_list);
    return Promise.all(fileArray.map(file => processSingleFile(file)));
  }

  function zipMyFilesAndSave(file_list){
    const zip = new JSZip();
    for (let i = 0; i < file_list.length; i++) {
      zip.file(file_list[i].name, file_list[i]);
    }
    zip.generateAsync({type:"blob"})
      .then(blob => {
        saveAs(blob, "hello.zip");
      })
      .catch(err => {
        console.error("压缩出错：", err);
      });
  }

  // 用async/await简化异步逻辑，贴近Python习惯
  $("#the-file-field").change(async function() {
    console.log("files have been chosen");
    const file_list = this.files;
    try {
      const processedFiles = await changeCharsInFiles(file_list);
      zipMyFilesAndSave(processedFiles);
    } catch (err) {
      console.error("处理出错：", err);
      alert("处理文件时发生错误，请查看控制台信息");
    }
  });
} else {
  alert('The File APIs are not fully supported in this browser.');
}

• Promise的作用：每个Promise代表一个异步操作的最终结果，我们用它封装FileReader的异步逻辑，避免了混乱的回调嵌套。
• Promise.all的意义：它会等待所有传入的Promise都完成，然后返回一个包含所有结果的数组，完美解决多文件异步等待的问题。
• async/await语法糖：和Python里的await逻辑一致，让异步代码看起来像同步代码，对你来说学习成本更低，可读性也更好。
• Blob的name属性：原生Blob没有文件名属性，手动添加后，压缩包才能保留原文件的名称，这是很容易忽略的细节。

内容的提问来源于stack exchange，提问作者user140832