JS FileReader onload异步结果无法被await获取的正确实现方式

你的判断完全准确：FileReader是事件回调模型的异步API，readAsText方法本身没有返回值（默认返回undefined），直接对它调用await不会等待onload回调内的逻辑执行完成。另外事件监听器的返回值会被运行时直接丢弃，哪怕你给onload传了async函数，它返回的Promise也不会被FileReader等待执行，自然拿不到你在回调里return的true/false。

方案1：兼容所有环境的Promise包装写法 #

把FileReader的读取、后续业务逻辑整体封装进Promise，将成功状态、错误状态和Promise的resolve/reject绑定，外层就可以正常await拿到全流程的执行结果：

async handleFile(e){
  const file = e.target.files[0];
  const rendered = await new Promise((resolve, reject) => {
    const reader = new FileReader();
    // 捕获文件读取本身的错误
    reader.onerror = () => reject(new Error('文件读取失败'));
    
    reader.onload = async (f) => {
      try {                
        await somelibrary.load(f.target.result);
        await somelibrary.render();
        await someotherlibrary.init();
        resolve(true);
      } catch (err) {
        console.error('文件处理出错：', err);
        // 如果需要上层统一处理错误，这里可以改成 reject(err)
        resolve(false);
      }
    };

    reader.readAsText(file);
  });

  console.log(rendered); // 此处可拿到正确的布尔结果
  return rendered;
}

方案2：现代浏览器简化写法 #

如果不需要兼容特别老的浏览器，可以直接用File对象自带的text()方法，它原生返回Promise，不需要手动包装FileReader，代码更简洁：

async handleFile(e){
  const file = e.target.files[0];
  let rendered = false;
  try {
    const fileContent = await file.text();
    await somelibrary.load(fileContent);
    await somelibrary.render();
    await someotherlibrary.init();
    rendered = true;
  } catch (err) {
    console.error('文件处理出错：', err);
  }
  console.log(rendered);
  return rendered;
}

• 如果你需要在调用handleFile的上层统一处理所有错误（包括文件读取失败、库调用失败），可以把catch逻辑挪到外层，不需要在内部单独处理，直接在出错的位置调用reject(err)或者抛出异常即可。
• 不要依赖事件回调的返回值传递结果，所有事件驱动的异步API如果要配合async/await使用，都需要先包装成Promise格式。

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