将文件读取器结果保存到变量以供以后使用答案

【问题标题】：Save filereader result to variable for later use将文件读取器结果保存到变量以供以后使用
【发布时间】：2021-03-24 09:27:45
【问题描述】：

我找不到简单的答案，但我的代码很简单。我尝试过类似的方法，但总是当我尝试 console.log 我的 testResult 时，我总是收到 null。如何正确保存文件中的数据？

public getFile(
    sourceFile: File
  ): string {
    let testResult;
    const file = sourceFile[0]
    const fileReader = new FileReader();
    fileReader.readAsText(file, "UTF-8")
    fileReader.onloadend = (e) => { 
      testResult = fileReader.result.toString()
    } 
    console.log(testResult)
    return testResult
  }

这个问题与我的其他主题有关，主要原因是我无法处理加载 json 文件、翻译它们并上传给用户。如果我可以将此文件保存在 onloadend 之外，那么我希望我可以处理其余的文件（其他尝试失败，这个一开始就阻止了我）

【问题讨论】：

标签： json typescript file filereader

【解决方案1】：

您的问题非常经典，与异步操作有关。您分配给onloadend 请求的函数仅在loadend 事件触发时调用，但其余代码不会等待该事件发生并将继续执行。所以console.log 将立即执行，然后return 将在testResult 仍然为空时实际返回。

首先，为了理解我刚才所说的，将console.log(testResult) 行放在onloadend 处理程序中：

fileReader.onloadend = (e) => { 
  testResult = fileReader.result.toString();
  console.log(testResult);
}

此时testResult 不为空，您可以在此函数中继续处理它。但是，如果您希望 getFile 方法真正可重用并希望它返回 testResult 并在其他地方处理它，则需要将此方法包装到 Promise 中，如下所示：

public getFile(
    sourceFile: File
  ): Promise<string> {
    return new Promise((resolve) => {
      const file = sourceFile[0]
      const fileReader = new FileReader();
      fileReader.onloadend = (e) => { 
        const testResult = fileReader.result.toString();
        resolve(testResult);
      }
      fileReader.readAsText(file, "UTF-8");
    });
  }

现在，无论您在哪里需要文件，都可以使用yourInstance.getFile 方法，如下所示：

yourInstance.getFile().then(testResult => {
  // do whatever you need here
  console.log(testResult);
});

或者以异步/等待方式：

async function processResult() {
  const testResult = await yourInstance.getFile();
  // do whatever you need
  console.log(testResult);
}

如果您现在熟悉 Promise 和/或 async/await，请阅读有关 here 和 here 的更多信息。

【讨论】：