Async/await搭配FileReader加载Excel时的执行异常问题

核心问题排查 #

1. 异步调用未等待：launchAll里调用loadFile时没加await，导致createEmptyTree和createTree直接同步执行——这时候Excel数据还没加载完成，mappedData是空的，后续逻辑自然出问题，还会触发你说的“调用栈为空”的停止情况。
2. XLSX解析参数不匹配：用readAsArrayBuffer读取的是ArrayBuffer类型，但XLSX.read里设的type: 'binary'，解析会失败，间接导致onload逻辑异常。
3. 语法错误：loadFile(files[0]少了闭合括号，函数调用不合法。
4. 全局变量与循环变量污染：mappedData用全局变量传递数据，循环里的i没加let，会变成全局变量，容易引发意外问题。

修正后的完整代码 #

async function launchAll() {
  var files = document.getElementById('file_upload').files;
  if (files.length === 0) {
    alert("Please choose any file...");
    return;
  }
  
  try {
    // 等待文件加载和数据映射完成
    await loadFile(files[0]);
    createEmptyTree();  // 此时mappedData已填充完成
    createTree();       // 基于有效数据创建DAG
  } catch (err) {
    console.error("流程执行失败:", err);
  }
}

async function loadFile(file) {
  let processedData = await readFileAsync(file);
  console.log("File loaded !!", processedData);
  return processedData;
};

function readFileAsync(file) {
  return new Promise((resolve, reject) => {
    let reader = new FileReader();
    reader.onload = (event) => {
      try {
        var data = event.target.result;
        // ArrayBuffer对应XLSX的type参数为'array'
        var workbook = XLSX.read(data, { type: 'array' });
        var roa = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[workbook.SheetNames[0]]);
        const mappedData = []; // 改用局部变量，避免全局状态污染
        if (roa.length > 0) {
          // 用let声明循环变量，避免全局污染
          for (let i = 0; i < roa.length; i++) {
            mappedData.push(mapNode(roa[i], i));
          }
        }
        // 直接返回处理好的数据，而非event对象
        resolve(mappedData);
      } catch (parseErr) {
        // 捕获Excel解析、数据映射过程中的错误
        reject(parseErr);
      }
    };
    reader.onerror = (error) => {
      reject(error);
    };
    reader.readAsArrayBuffer(file);
  });
}

关键修复说明 #

• 强制异步等待：把launchAll改为async函数，调用loadFile时加await，确保数据加载完成后再执行后续树创建逻辑，彻底解决时序问题。
• 匹配XLSX解析类型：将XLSX.read的type改为'array'，和readAsArrayBuffer读取的格式对应，保证解析成功。
• 消除语法与变量污染：补全函数调用的闭合括号，循环变量用let声明，改用局部变量存储处理后的数据，减少全局状态带来的不可预测性。
• 增强错误捕获：在reader.onload内部加入try-catch，捕获解析和映射过程中的错误，避免静默失败。

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